@import url(https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.cdnfonts.com/css/satoshi);
:root {
  --body__background: #ffffff;
  --header__color: #2b2929;
  --page_Header_Color: #52545a;
  --primary__color: #6860ee;
  --scrollbar-track: rgb(250, 250, 250);
  --scrollbar-thumb: rgb(200, 200, 200);
  --scrollbar-thumb-hover: #1b52a742;
  --scrollbar-thumb-active: #1b52a740;
  --skills_chips_border: none;
  --otp_box_border:#ddd;
  --card__background: #fff;
  --card__border: rgb(0 0 0 / 10%);
  --skills_chips_background: #e0deff;
  --skill-badge-color: rgb(45, 35, 219);
  --skill-badge-bg: rgb(224, 222, 255);
  --skill-badge-border: none;
  --job_desc_linear: linear-gradient(#ffffff, #dcdafb);
  --client_card_linear: linear-gradient(to right, #dbdbf9, #f1f2fb);
  --client_card_background: #f8fafc;
  --client_card_border: #e2e8f0;
  --cards-background: #fff;
  --cards-border: #ddd;
  --desc_skills_chips_border: #6665ea;
  --desc_skills_chips_background: #f3f4ff;
  --desc_skills_chips_color: #7777ed;
  --sidenav-background: #f8fafc;
  --navbar_boxShadow: rgba(0, 0, 0, 0.1);
  --content_Popup_Border: "";
  --information_Note_Background: #fef5e7;
  --delete_Container-Background: #f2f2ff;
  --job-Description_Color: #444;
  --chat_tab_background: #f9f9f9;
  --navigation__bg: #e0deff;
  --signup__text: #656567;
  --ai-Driven-Green-Card: linear-gradient(rgb(66 185 120 / 31%), #d6ffe8);
  --ai-Driven-Blue-Card: linear-gradient(
    rgba(79, 133, 229, 0.45),
    rgb(214, 232, 255)
  );
  --ai-Driven-Violet-Card: linear-gradient(rgb(78 51 149 / 35%), #dfd3ff);
  --ai-Driven-Red-Card: linear-gradient(rgb(222 45 49 / 32%), #ffcdce);
  --job_desc_active_color: #e1e0fb;
  --account_Tab_Hover: #efefef;
  --subscription_Plan_Background: #efefef;
  --plan_Container_Button: #ddd;
  --notfication_Card_Background: linear-gradient(145deg, #fff, #f4f4f4);
  --card__sub_Header_color: #686464;
  --tab__background: #f3f3fa;
  --tabborder__color: none;
  --calendar__bgColor: #eaf6ff;
  --table_header_backgroundcolor: #f2f2ff;
  --table_header_color: #7979e9;
  --table__background: #ffffff;
  --border__color: #e2e2e2;
  --header-border__color: #e2e2e2;
  --sidenav-border__color: #e2e2e2;
  --plan_Expiry_Box_Color: #f7f4ff;
  --plan_Expiry_Box_Border: #ded7ff;
  --popup_Item_Hover: #ddd;
  --dashboard_Card_Border: #ddd;
  --login__header: rgba(0, 0, 255, 0.774);
  --login__container_header: #000;
  --login__sideheading: #000;
  --file__upload_container: #fff;
  --dashed__border: #6860ee;
  --table__folder_container: #97939757;
  --table__folder_Color: #000;
  --TreeItem__background: rgb(157 194 231 / 42%);
  --TreeItem__color: #000;
  --TreeItem__Scrollbar_background: #fff;
    --trackhistory_remark_bg:#f6f5ff;
  --Footer__background: #ddddddce;
  --Footer__color: #241f1f;
  --Footer__Inner_color: rgb(65, 63, 63);
  --ChatBot_Reply__background: #fff;
  --ChatBot_Reply__Color: #202123;
  --ChatBot_User_Color: #acacac52;
  --Skeleton__Background: #d6d6d6;
  --Skeleton__td_Color: rgb(0 0 0 / 11%);
  --Skeleton__File_Inner: #bfbfbf;
  --Skeleton__File_Background: #c7c7c78c;
  --calendar_bgColor: #eaf6ff;
  --calendar__border: #ccc;
  --select__hover: #d2e6fd;
  --pagination__border: rgb(25 118 211);
  --pagination__hover: rgba(104, 96, 238, 0.1);
  --breadcumb__background: none;
  --lastactivity__color: #1b158d;
  --resume-upload-background: url(/static/media/resume-upload-background.bef4e5c14034ea8781b9.png);
  --selected_chat_background: #e7e6fe;
  --selected_chat_color: #484be8;
  --chat_tab_hover: #57575a21;
  --inactive__tabborder: none;
  --placeholder__color: #ddd;
  --sidepopup-header-color: #6860ee;
  --sidepopup-header-background: #e5e6ff;
  --sidepopup-background: hsl(0, 0%, 100%);
  --global-search-container-border: #d1cfff;
  --search-header-background-color: #f8f7ff;
  --search-title-color: #6860ee;
  --search-subtext-color: #666;
  --search-suggestion-background-color: #e2eeff;
  --search-suggestionhover-background-color: #e5e7eb;
  --search-input-section-border: #f4f4f4;
  --search-button-background-color: #564fe2;
  --short-long-description-textcolor: #6b7280;
  --dashboardcard-icon-background: #ede9fe;
  --sidepopup-label-color: #64748b;
  --kanban-background-with-card: rgba(209, 192, 250, 0.259);
  --accordian-background: #e1dfff;
  --accordian-border: #c4c4c2;
  --accordian-text: #6860ee;
  --conversations-text: #646b7a;
  --conversations-headertext: #6366f1;
  --job-conversations-headertext: #ff721a;
  --chart_bar_hover:#eeedfe;
  --selectinput_dropdown_text: rgb(45, 44, 48);
  --conversations-header: linear-gradient(
    143deg,
    rgba(239, 243, 255, 1) 0%,
    rgba(218, 227, 255, 1) 100%
  );
  --conversations-job-header: linear-gradient(
    143deg,
    rgb(255 247 237) 0%,
    rgb(255 237 213) 100%
  );
  --history_text_color:#ffffff;
  --disabled_calender: #cfc8c8;
  --icon-bg-candidates: #e0e7ff;
  --icon-bg-jobs: #d1fae5;
  --icon-bg-interviews: #fef3c7;
  --icon-bg-tracked: #FAF5FF;

  --chip-bg-new-profile: #E0F7FA;
  --chip-text-new-profile: #006064;
  --chip-border-new-profile: #06787c;

  --chip-bg-not-spoken: #FFF3E0;
  --chip-text-not-spoken: #E65100;
  --chip-border-not-spoken: #f1681e;

  --chip-bg-spoken-to-track: #F3E5F5;
  --chip-text-spoken-to-track: #6A1B9A;
  --chip-border-spoken-to-track: #7b1fa2;

  --chip-bg-not-suitable: #FFEBEE;
  --chip-text-not-suitable: #C62828;
  --chip-border-not-suitable: #f44336;

  --chip-bg-not-interested: #EDE7F6;
  --chip-text-not-interested: #4527A0;
  --chip-border-not-interested: #5735bb;

  --chip-bg-interested: #E8F5E9;
  --chip-text-interested: #2E7D32;
  --chip-border-interested: #46ab4b;

  --chip-bg-proposed: #E3F2FD;
  --chip-text-proposed: #1565C0;
  --chip-border-proposed: #1976d2;

  --chip-bg-shortlisted: #FFFDE7;
  --chip-text-shortlisted: #F9A825;
  --chip-border-shortlisted: #fdb94a;

  --chip-bg-interview-scheduled: #E1F5FE;
  --chip-text-interview-scheduled: #0277BD;
  --chip-border-interview-scheduled: #149be3;

  --chip-bg-interview-reject: #FFEBEE;
  --chip-text-interview-reject: #D32F2F;
  --chip-border-interview-reject: #f44336;

  --chip-bg-offered: #F1F8E9;
  --chip-text-offered: #689F38;
  --chip-border-offered: #4caf50;

  --chip-bg-offer-rejected-client: #FBE9E7;
  --chip-text-offer-rejected-client: #D84315;
  --chip-border-offer-rejected-client: #f44336;

  --chip-bg-offer-declined-candidate: #FBE9E7;
  --chip-text-offer-declined-candidate: #BF360C;
  --chip-border-offer-declined-candidate: #f44336;

  --chip-bg-joined: #E8F5E9;
  --chip-text-joined: #2E7D32;
  --chip-border-joined: #46ab4b;

  --chip-bg-joined-client-reject: #FFCCBC;
  --chip-text-joined-client-reject: #D84315;
  --chip-border-joined-client-reject: #f44336;

  --chip-bg-project-end: #ECEFF1;
  --chip-text-project-end: #37474F;
  --chip-border-project-end: #757575;

  --chip-bg-withdrawn: #fcd6e3;
  --chip-text-withdrawn: #8d064e;
  --chip-border-withdrawn: #fa2b1d;

  --chip-bg-fake: #FCE4EC;
  --chip-text-fake: #880E4F;
  --chip-border-fake: #f44336;

  --chip-bg-default: #E0E0E0;
  --chip-text-default: #424242;
  --chip-border-default: #757575;

  --chat-text: #000000;
  --resume-buttons-hover: #c6c6fa;
  --userdashboard_selectedtab: #29313D;
  --userdashboard_tabbackground: #F3F5F680;
  --userdashboard_tabbackground_shadow: #b8b8b851;
  --all-tracked-created-border: #ddd;
  --all-tracked-created-bg: #F4F4F4CC;
  --all-tracked-created-text: #5C5C5C;
  --all-tracked-created-selected-border: #C7C4FF;
  --all-tracked-created-selected-bg: #EBEAFFCC;
  --all-tracked-created-selected-text: #6860EE;
  --text_color: #000000;
  --text-color-accent: #51565d;
  --banner-grad-start: #6b46ff;
  --banner-grad-end: #7c6bff;
  --muted: #6b7280;
  --filter-button: #F3F4F6;
  --grid-a-text: #29313D;
  --grid-na-text: #737D8C;
  --grid-bg: rgba(243,245,246,0.9);
  --grid-a-bg: #ffffff;
  --preview-apply-bg: #F7F6FF;
  --preview-email-bg: #FFFFFF;
  --disabled-button: #B3B3B3;
  --avatar-icon-bg: #E0E7FF;
  --avatar-icon-border: #6860EE;
  --table-row-hover: #F3F3FE;
  --table-row-hover-number-background: #D7D5FB;
  --table-row-hover-number-color: #453DCB;
  --super-admin-header-left: #777b87;
  --super-admin-tenant-avatar-bg: #f4f4f6;
  --super-admin-tenant-avatar-border: #e3e3e7;
  --super-admin-tenant-avatar-color: #70727d;
  --invoice-billing-total-amount-bg: #EFEEFD;
}

[data-theme="dark"] {
  --scrollbar-track: #2d2d2d;
  --scrollbar-thumb: rgb(104, 104, 104);
  --scrollbar-thumb-hover: rgba(104, 96, 238, 0.5);
  --scrollbar-thumb-active: rgba(105, 103, 140, 0.6);
  --sidepopup-header-color: #f1ebeb;
  --sidepopup-header-background: #151515;
  --sidepopup-background: hsl(228 14% 10%);
  --primary__color: #6860ee;
  --short-long-description-textcolor: #b1b1b1;
  --body__background: hsl(228 14% 8%);
  --header__color: #f1ebeb;
  --page_Header_Color: #ffffff;
  --card__background: hsl(228deg 9.64% 14.46%);
  --card__border: rgb(255 255 255 / 15%);
  --otp_box_border:#5c47ce;
  --button__color: #6329c1;
  --skills_chips_border: #6860ee;
  --skills_chips_background: #151515;
  --skill-badge-color: #bdb8ff;
  --skill-badge-bg:rgb(75 63 255 / 22%);
  --skill-badge-border:#6860ee69;
  --job_desc_linear: linear-gradient(#151515, #201d52);
  --client_card_linear: linear-gradient(to right, #464297, #2e2b56);
  --client_card_background: #151515;
  --client_card_border: #524ad7;
  --cards-background: #2a2a2a;
  --cards-border: #424242;
  --desc_skills_chips_border: #5151d7;
  --desc_skills_chips_background: #5151d7;
  --desc_skills_chips_color: #ffffff;
  --sidenav-background: hsl(228 14% 4% / 1);
  --navbar_boxShadow: rgb(156, 154, 154);
  --content_Popup_Border: #ddd;
  --information_Note_Background: #151515;
  --delete_Container-Background: #151515;
  --job-Description_Color: #b7b7b7;
  --chat_tab_background: #252525;
  --navigation__bg: #151515;
  --signup__text: #d1cbcb;
  --ai-Driven-Green-Card: linear-gradient(rgb(0 165 105), rgb(0 169 108 / -6%));
  --ai-Driven-Blue-Card: linear-gradient(
    rgb(23 102 241 / 70%),
    rgb(190 219 255 / -6%)
  );
  --ai-Driven-Violet-Card: linear-gradient(
    rgb(79 55 147),
    rgb(79 55 147 / -6%)
  );
  --ai-Driven-Red-Card: linear-gradient(rgb(232 45 45), rgb(232 45 45 / -6%));
  --job_desc_active_color: #a1a0ff;
  --account_Tab_Hover: #444444;
  --subscription_Plan_Background: #151515;
  --plan_Container_Button: #151515;
  --notfication_Card_Background: #151515;
  --card__sub_Header_color: #fff;
  --tabborder__color: #6860ee;
  --tab__background: #151515;
  --calendar__bgColor: #151515;
  --table_header_backgroundcolor: #2a266c;
  --table_header_color: #ffffff;
  --table__background: #151515;
  --border__color: hsl(228, 9%, 32%);
  --header-border__color: hsl(228 14% 22%);
  --sidenav-border__color: hsl(228 14% 22%);
  --plan_Expiry_Box_Color: #231f52;
  --plan_Expiry_Box_Border: #231f52;
  --popup_Item_Hover: #444444;
  --dashboard_Card_Border: #9c9a9a;
  --login__header: white;
  --login__container_header: #f1ebeb;
  --login__sideheading: #d3cdcd;
  --file__upload_container: #202123;
  --dashed__border: rgb(56, 132, 255);
  --table__folder_container: #ffffff2e;
  --table__folder_Color: #000;
  --TreeItem__background: #fcf7f71e;
  --TreeItem__color: #000;
    --trackhistory_remark_bg:#1f1e34;
  --TreeItem__Scrollbar_background: #343541;
  --Footer__background: #333;
  --Footer__color: #f3ededfb;
  --Footer__Inner_color: rgba(201, 198, 198, 0.911);
  --ChatBot_Reply__background: #202123;
  --ChatBot_Reply__Color: #fff;
  --ChatBot_User_Color: #8e8e8e57;
  --Skeleton__Background: #2e2f3a;
  --Skeleton__td_Color: rgb(255 255 255 / 50%);
  --Skeleton__File_Inner: #898a8e;
  --Skeleton__File_Background: #8989898c;
  --calendar_bgColor: #151515;
  --calendar__border: #fff;
  --select__hover: #000000;
  --pagination__border: #fff;
  --pagination__hover: rgba(104, 96, 238, 0.3);
  --breadcumb__background: white;
  --lastactivity__color: white;
  --resume-upload-background: url(/static/media/resume-upload-dark-background.1ef484c8738de779c2cb.png);
  --selected_chat_background: #2d2d2d;
  --selected_chat_color: #ffffff;
  --chat_tab_hover: #42424245;
  --inactive__tabborder: #6860ee;
  --placeholder__color: #ccc;
  --global-search-container-border: #4a4695;
  --search-header-background-color: #342cbba3;
  --search-title-color: #f5f5f5;
  --search-subtext-color: #f5f5f5;
  --search-suggestion-background-color: #023baf;
  --search-suggestionhover-background-color: rgba(136, 132, 136, 0.467);
  --search-input-section-border: #444;
  --search-button-background-color: #564fe2;
  --dashboardcard-icon-background: #6329c1;
  --sidepopup-label-color: #cccccc;
  --kanban-background-with-card: #4a47662e;
  --accordian-background: hsl(228deg 14% 16% / 50%);
  --accordian-border: hsl(228 14% 22%);
  --accordian-text: #fff;
  --conversations-text: #efefef;
  --conversations-headertext: #ffffff;
  --job-conversations-headertext: #ffffff;
  --chart_bar_hover:#ffffff;
  --selectinput_dropdown_text: rgba(201, 198, 198, 0.911);
  --conversations-header: linear-gradient(
    143deg,
    rgb(61 101 218) 0%,
    rgb(12 37 113) 100%
  );
  --conversations-job-header: linear-gradient(
    143deg,
    rgb(225 111 61) 0%,
    rgb(119 39 5) 100%
  );
  --history_text_color:#151515;
  --disabled_calender: #666 ;
  --icon-bg-candidates: #0D4389;
  --icon-bg-jobs: #0A6F29;
  --icon-bg-interviews: #7C4C04;
  --icon-bg-tracked: #590BA7;

  --chip-bg-new-profile: #004D40;
  --chip-text-new-profile: #B2EBF2;
  --chip-border-new-profile: #0f8f79;

  --chip-bg-not-spoken: #FF6F00;
  --chip-text-not-spoken: #FFF3E0;
  --chip-border-not-spoken: #FF6F00;

  --chip-bg-spoken-to-track: #4A148C;
  --chip-text-spoken-to-track: #E1BEE7;
  --chip-border-spoken-to-track: #4A148C;

  --chip-bg-not-suitable: #B71C1C;
  --chip-text-not-suitable: #FFCDD2;
  --chip-border-not-suitable: #d53131;

  --chip-bg-not-interested: #311B92;
  --chip-text-not-interested: #D1C4E9;
  --chip-border-not-interested: #482ebd;

  --chip-bg-interested: #1B5E20;
  --chip-text-interested: #C8E6C9;
  --chip-border-interested: #2a7e2f;

  --chip-bg-proposed: #0D47A1;
  --chip-text-proposed: #BBDEFB;
  --chip-border-proposed: #2979ff;

  --chip-bg-shortlisted: #F57F17;
  --chip-text-shortlisted: #FFF9C4;
  --chip-border-shortlisted: #f57c00;

  --chip-bg-interview-scheduled: #01579B;
  --chip-text-interview-scheduled: #B3E5FC;
  --chip-border-interview-scheduled: #0c6db8;

  --chip-bg-interview-reject: #C62828;
  --chip-text-interview-reject: #FFCDD2;
  --chip-border-interview-reject: #e13e3e;

  --chip-bg-offered: #33691E;
  --chip-text-offered: #DCEDC8;
  --chip-border-offered: #43a047;

  --chip-bg-offer-rejected-client: #BF360C;
  --chip-text-offer-rejected-client: #FFCCBC;
  --chip-border-offer-rejected-client: #e65100;

  --chip-bg-offer-declined-candidate: #BF360C;
  --chip-text-offer-declined-candidate: #FFCCBC;
  --chip-border-offer-declined-candidate: #e65100;

  --chip-bg-joined: #1B5E20;
  --chip-text-joined: #C8E6C9;
  --chip-border-joined: #2a7e2f;

  --chip-bg-joined-client-reject: #BF360C;
  --chip-text-joined-client-reject: #FFAB91;
  --chip-border-joined-client-reject: #e65100;

  --chip-bg-project-end: #263238;
  --chip-text-project-end: #CFD8DC;
  --chip-border-project-end: #455a64;

  --chip-bg-withdrawn: #88084c;
  --chip-text-withdrawn: #fca6c4;
  --chip-border-withdrawn: #b10e65;

  --chip-bg-fake: #880E4F;
  --chip-text-fake: #F8BBD0;
  --chip-border-fake: #ab1c68;

  --chip-bg-default: #212121;
  --chip-text-default: #E0E0E0;
  --chip-border-default: #424242;

  --chat-text: #FFFFFF;
  --resume-buttons-hover: #37356a;

  --userdashboard_selectedtab: #FFFFFF;
  --userdashboard_tabbackground: #212121;
  --userdashboard_tabbackground_shadow: #6d6d6d6f;
  --all-tracked-created-border: #000;
  --all-tracked-created-bg: #F4F4F4CC;
  --all-tracked-created-text: #5C5C5C;
  --all-tracked-created-selected-border: #C7C4FF;
  --all-tracked-created-selected-bg: #000;
  --all-tracked-created-selected-text: #6860EE;
  --text_color: #ffffff;
  --text-color-accent: #a0aec0;
  --banner-grad-start: #6b46ff;
  --banner-grad-end: #7c6bff;
  --muted: #6b7280;
  --filter-button: #212121;
  --grid-a-text: rgb(243, 245, 246);
  --grid-na-text: #737D8C;
  --grid-bg: #1F1F1F;
  --grid-a-bg: #383838;
  --preview-apply-bg: #222222;
  --preview-email-bg: #1F1F1F;
  --disabled-button: #7A7A7A;
  --avatar-icon-bg: #784eda26;
  --avatar-icon-border: hsl(258deg 65% 58% / 25%);
  --table-row-hover: #2A2A2C;
  --table-row-hover-number-background: #47474A;
  --table-row-hover-number-color: #FFFFFF;
  --super-admin-header-left: #9b9ca5;
  --super-admin-tenant-avatar-bg: #292a31;
  --super-admin-tenant-avatar-border: #41424a;
  --super-admin-tenant-avatar-color: #b5b6bd;
  --invoice-billing-total-amount-bg: #2a2a2a;
}

/* html {
  scrollbar-gutter: stable;
} */

body {
  margin: 0;
  font-family: "Satoshi", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  background-color: var(--body__background);
  color: #2b2929;
  color: var(--header__color);
  scrollbar-width: 2px;
  scrollbar-color: rgb(200, 200, 200) rgb(250, 250, 250);
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
} */

.inner-page-outer-container {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;
  background-color: var(--body__background);
  color: #2b2929;
  color: var(--header__color);
}

.pages-container {
  background-color: #ffffff;
  background-color: var(--body__background);
  color: #2b2929;
  color: var(--header__color);
}

.inner-page-outer-container::-webkit-scrollbar {
  display: none;
}

*::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: rgb(250, 250, 250);
  background-color: var(--scrollbar-track);
}

*::-webkit-scrollbar-track:hover {
  background-color: rgb(250, 250, 250);
  background-color: var(--scrollbar-track);
}

*::-webkit-scrollbar-track:active {
  background-color: rgb(250, 250, 250);
  background-color: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(200, 200, 200);
  background-color: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:active {
  background-color: #1b52a740;
  background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #1b52a742;
  background-color: var(--scrollbar-thumb-hover);
}

.header-main-container {
  display: flex;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9;
  padding: 2px 24px;
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--header-border__color);
  height: 59px;
  /* width: 100%; */
  align-items: center;
  background-color: #ffffff;
  background-color: var(--body__background);
  color: #2b2929;
  color: var(--header__color);
}

.header-inner-container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.header-icon-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-container {
  display: flex;
  gap: 10px;
}

.szh-menu-container {
  width: 100%;
}

/* .header-main-container img {
  width: 30px;
  height: 30px;
} */

img.header-title-icon {
  width: 30px;
  height: 30px;
}
.header-container {
  margin: 0;
  color: #52545a;
  color: var(--page_Header_Color);
}
.rpv-core__viewer.rpv-core__viewer--light {
  margin-top: 20px;
}
@media (min-width: 1500px) {
  .inner-page-outer-container {
    /* max-height: 90vh; */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Enhanced shine animations for buttons and cards
 * This file contains various shine and glitter effects 
 * that can be used throughout the application
 */

/* Improved smooth shine animation */
@keyframes smooth-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Glitter animation - creates sparkling effect */
@keyframes glitter {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Pulse glow animation */
@keyframes pulse-glow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5);
  }
}

/* Shimmer animation - subtle horizontal shine */
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* Border shine animation */
@keyframes border-shine {
  0% {
    border-color: rgba(255, 255, 255, 0.2);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.8);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* CSS classes to apply the animations */

/* Smooth shine button style */
.btn-smooth-shine {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 10%, 
    rgba(255, 255, 255, 0.8) 20%, 
    rgba(255, 255, 255, 0.05) 30%,
    transparent 40%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: smooth-shine 2s linear infinite;
}

/* Glitter effect - add this to elements to create sparkling dots */
.glitter-effect {
  position: relative;
  overflow: hidden;
}

.glitter-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0.1%, transparent 1%),
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.8) 0.1%, transparent 1%),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.9) 0.1%, transparent 1%),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.8) 0.1%, transparent 1%),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.9) 0.1%, transparent 1%);
  background-size: 200% 200%;
  pointer-events: none;
  animation: glitter 4s ease-in-out infinite;
  z-index: 5;
}

/* Pulse glow effect */
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Shimmer effect - more subtle than the shine */
.shimmer-effect {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 3s infinite;
}

/* Border shine effect */
.border-shine {
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: border-shine 2s infinite;
}

/* Combined effects for buttons */
.shine-button {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 5%, 
    rgba(255, 255, 255, 0.8) 15%, 
    rgba(255, 255, 255, 0.1) 25%,
    transparent 35%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: smooth-shine 1.5s linear infinite;
}

/* Remove the on-hover effect to make animation continuous */
.shine-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle, 
    rgba(255, 255, 255, 0.3) 0%, 
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
} 
@keyframes sparkle {
    0%, 100% {
      background-position: 0% 0%;
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      background-position: 100% 100%;
      opacity: 0;
    }
    75% {
      opacity: 0.5;
    }
  }

  @keyframes wave-shine {
    0% {
      background-position: -100% 0;
    }
    100% {
      background-position: 100% 0;
    }
  }

  @keyframes glow-pulse {
    0%, 100% {
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
                  0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
                  0 0 30px rgba(255, 255, 255, 0.5);
    }
  }

  .ai-sparkle-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  
  .ai-sparkle-button::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    z-index: -1;
    background-image: 
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 1) 0.1%, transparent 2%),
      radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.9) 0.1%, transparent 2%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 1) 0.1%, transparent 2%),
      radial-gradient(circle at 30% 65%, rgba(255, 255, 255, 0.9) 0.1%, transparent 2%),
      radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 1) 0.1%, transparent 2%),
      radial-gradient(circle at 25% 10%, rgba(255, 255, 255, 0.9) 0.1%, transparent 2%),
      radial-gradient(circle at 65% 90%, rgba(255, 255, 255, 1) 0.1%, transparent 2%);
    background-size: 200% 200%;
    opacity: 0.7;
    animation: sparkle 6s linear infinite;
    pointer-events: none;
  }

  .wave-shine {
    position: relative;
    overflow: hidden;
  }
  
  .wave-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 65%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: wave-shine 2s linear infinite;
    pointer-events: none;
  }

  .glow-pulse {
    animation: glow-pulse 2s ease-in-out infinite;
  }

  .super-shine-button {
    position: relative;
    overflow: hidden;
  }
  
  .super-shine-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    width: 320%;
    height: 320%;
    background: linear-gradient(
      45deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 30%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%
    );
    background-size: 200% 200%;
    transform: rotate(30deg);
    animation: wave-shine 2.1s linear infinite;
    z-index: 1;
    pointer-events: none;
  }
  
  .super-shine-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: glow-pulse 2s ease-in-out infinite;
    pointer-events: none;
  } 
.side-nav {
  /* width: 250px; */
  width: 100%;
  background-color: var(--sidenav-background);
  height: 100%;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-right: 1px solid var(--sidenav-border__color);
  color: var(--header__color);
  overflow: hidden;
  gap: 10px;
}
.side-navbar-container {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 999;
}

.navbar-logo {
  width: 80%;
}

.logo-container {
  display: flex;
  /* flex-wrap: wrap; */
  position: relative;
  padding: 0px 6px;
}
.single-logo-container {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  position: relative;
}

/* Desktop specific styles for sidebar */
.side-navbar-container.desktop-open-tab {
  width: inherit;
  transform: translateX(0);
}

.side-navbar-container.desktop-closed-tab {
  width: 70px;
  transform: translateX(0);
}

/* Mobile specific styles for sidebar */
.side-navbar-container.mobile-menu-expanded {
  /* width: 250px; */
  transform: translateX(0);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

.side-navbar-container:not(.mobile-menu-expanded) .side-nav.mobile-hidden {
  transform: translateX(-100%);
}

.side-nav.mobile-visible {
  transform: translateX(0);
  width: 250px;
  padding: 10px;
}

.side-nav .MuiButtonBase-root.MuiListItemButton-root {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
}

/* Header within the sidebar/mobile menu */
.side-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 10px;
  border-bottom: 1px solid var(--navbar_boxShadow);
  min-height: 60px;
  box-sizing: border-box;
}

.side-nav-header-logo-full {
  height: 35px;
  cursor: pointer;
}

.side-nav-header-logo-minimized {
  height: 35px;
  width: auto;
  cursor: pointer;
}

.desktop-open-tab .side-nav-header-logo-minimized,
.mobile-menu-expanded .side-nav-header-logo-minimized {
  display: none;
}

.desktop-closed-tab .side-nav-header-logo-full {
  display: none;
}

.side-navbar-container.mobile-menu-expanded .side-nav-header-logo-minimized {
    display: none;
}
.side-navbar-container.mobile-menu-expanded .side-nav-header-logo-full {
    display: block;
}

.side-nav-toggle-icon-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.side-nav-header-toggle-icon {
  width: 24px;
  height: 24px;
}

.menu ul {
  list-style: none;
  padding: 0;
  font-size: 16px;
  background-color: var(--sidenav-background);
  color: var(--header__color);
}

.menu {
  display: flex;
  align-items: flex-start;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: #8c8cf1 #edf0f5;
}

.menu::-webkit-scrollbar {
  width: 6px;
}

.menu::-webkit-scrollbar-track {
  background-color: #edf0f5;
  border-radius: 5px;
}

.menu::-webkit-scrollbar-thumb {
  background-color: #8c8cf1;
  border-radius: 5px;
}

.menu::-webkit-scrollbar-thumb:hover {
  background-color: #6860ee;
}

.menu ul li {
  padding: 10px;
  font-size: 16px;
  color: #333;
  color: var(--menu-text-color, #333);
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.menu ul li:hover {
  background-color: #e7e5ff;
  background-color: var(--menu-item-hover-bg, #e7e5ff);
  color: #1b158d;
  color: var(--menu-item-hover-text, #1b158d);
}

.menu ul li.active {
  background-color: #e7e5ff;
  background-color: var(--menu-item-active-bg, #e7e5ff);
  color: #1b158d;
  color: var(--menu-item-active-text, #1b158d);
  font-weight: 600;
}

[data-theme="light"] .menu ul > div.sub-menus:nth-of-type(3) > .MuiButtonBase-root.active {
  background-color: #E8F1FF;
  color: var(--primary__color);
}

[data-theme="light"] .menu ul > div.sub-menus:last-of-type > .MuiButtonBase-root.active {
  background-color: #E8F1FF;
  color: var(--primary__color);
}

/* Mobile Top Bar (New) */
.mobile-top-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--body__background);
  border-bottom: 1px solid var(--navbar_boxShadow);
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  z-index: 998;
  box-sizing: border-box;
}

.mobile-top-bar-logo {
  height: 35px;
  cursor: pointer;
  margin: 0 auto;
}

.mobile-menu-toggle-icon-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-icon {
  width: 40px;
  height: 40px;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.mobile-menu-overlay.visible {
  display: block;
  opacity: 1;
}

/* Mobile Footer Menu (User Account in Mobile) */
.mobile-footer-menu {
  padding: 10px;
  border-top: 1px solid var(--navbar_boxShadow); /* Add a top border */
  background-color: var(--body__background);
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute; /* Position it at the bottom */
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%; /* Make it full width of the parent */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.mobile-footer-menu .MuiAvatar-root {
  width: 34px;
  height: 34px;
}

.mobile-footer-menu .username {
  font-size: 14px;
  color: var(--header__color);
  font-weight: 600;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-footer-menu .more-horiz-icon {
  color: var(--header__color);
  cursor: pointer;
}

.mobile-avatar-dropdown .MuiPaper-root {
  /* Style for dropdown when opened from mobile menu */
  position: fixed !important;
  bottom: 60px !important; /* Adjust based on new footer height + some spacing */
  left: 10px !important;
  right: auto !important;
  top: auto !important;
  width: calc(100% - 20px); /* Make it almost full width */
  max-width: 230px; /* Max width for the dropdown */
  transform-origin: bottom left !important;
  box-shadow: 0px -2px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) { /* Breakpoint for mobile view */
  .mobile-top-bar {
    display: flex;
  }

  .logo-container {
    display: flex;
    position: fixed;
    top: 0;
  }

  .side-navbar-container:not(.mobile-menu-expanded) {
    transform: translateX(-100%);
  }
  
  .side-navbar-container.desktop-open-tab,
  .side-navbar-container.desktop-closed-tab {
    width: 0;
  }

  .footer-menu:not(.mobile-footer-menu),
  .closed-footer-menu {
    display: none !important;
  }

  .mobile-footer-menu {
    display: flex !important;
    position: fixed;
  }
}

.menu-icon {
  width: 20px;
  height: 20px;
}

.menu ul li.active .menu-icon {
  filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(3486%) hue-rotate(235deg) brightness(90%) contrast(90%); /* Active color for icons */
}

.footer-menu {
  display: flex;
  gap: 8px;
  border: 1px solid #e6e5f4;
  border: 1px solid var(--footer-menu-border, #e6e5f4);
  padding: 10px 12px;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  background-color: var(--body__background);
  z-index: 990;
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

/* .closed-footer-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  left: 15px;
  width: 50px;
  height: 50px;
  background-color: var(--body__background);
  border: 1px solid var(--footer-menu-border, #e6e5f4);
  z-index: 990;
  transition: left 0.3s ease-in-out;
} */

.footer-menu .MuiAvatar-root {
  width: 34px;
  height: 34px;
}

.footer-menu .username {
  font-size: 16px;
  color: var(--header__color);
  font-weight: 700;
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.footer-menu .MuiSvgIcon-root,
.closed-footer-menu .MuiSvgIcon-root {
  color: var(--header__color);
}

.desktop-avatar-dropdown .MuiPaper-root {
   transform-origin: bottom left !important;
   left: 12px !important;
}

.closed-footer-menu .MuiSpeedDial-fab {
  width: 40px !important;
  height: 40px !important;
  box-shadow: none !important;
}

.closed-footer-menu .MuiSpeedDial-actions {
  padding-bottom: 50px;
}


.plan-expiring-container {
  background-color: var(--body__background);
  border: 1px solid #e6e5f4;
  border-radius: 16px;
  padding: 15px;
  width: 220px;
  margin-top: auto;
  margin-bottom: 10px;
  transition: width 0.3s ease-in-out;
}

.plan-expiring-container.collapsed-plan {
  width: 50px;
  padding: 10px;
  overflow: hidden;
}

.warning-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}

.plan-warning {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cancel-icon {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.warning-text .plan-expiry-message {
  font-size: 14px;
  font-weight: bold;
  color: var(--header__color);
  margin: 0;
}

.warning-text .plan-expiry-action {
  font-size: 12px;
  color: var(--text-color-secondary);
  margin: 0;
}

.plan-details .plan-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 5px;
}

.plan-info .plan-name {
  font-weight: bold;
  color: var(--header__color);
}

.plan-info .plan-days {
  color: var(--text-color-secondary);
}

.border-progress-bar {
  margin-bottom: 10px;
}

.upgrade-button {
  background-color: #6860ee;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.small-plan-expiring-container {
  background-color: var(--body__background);
  border: 1px solid #e6e5f4;
  border-radius: 16px;
  padding: 10px;
  width: 220px;
  margin-top: auto;
  margin-bottom: 10px;
  display: none;
}

.small-plan-expiring-container.collapsed-plan {
  display: block;
  width: 50px;
  overflow: hidden;
}

.small-plan-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.small-plan-warning img {
  width: 15px;
  height: 15px;
}

.small-plan-warning .plan-expiry-message {
  font-size: 12px;
  color: var(--header__color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 5px;
  flex-grow: 1;
}

.drop-up-arrow {
  cursor: pointer;
}

.sidebar-main-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 72px;
  box-sizing: border-box;
  overflow: hidden;
}

:root {
  --menu-text-color: #333;
  --menu-item-hover-bg: #e7e5ff;
  --menu-item-hover-text: #1b158d;
  --menu-item-active-bg: #e7e5ff;
  --menu-item-active-text: #1b158d;
  --footer-menu-border: #e6e5f4;
}

[data-theme="dark"] {
  --menu-text-color: #f0f0f0;
  --menu-item-hover-bg: #3a3a3a;
  --menu-item-hover-text: #d6ccff;
  --menu-item-active-bg: #4a4a4a;
  --menu-item-active-text: #d6ccff;
  --footer-menu-border: #424242;
}

[data-theme="dark"] .menu {
  scrollbar-color: #8c8cf1 #2d2d2d;
}

[data-theme="dark"] .menu::-webkit-scrollbar-track {
  background-color: #2d2d2d;
}

[data-theme="dark"] .menu::-webkit-scrollbar-thumb {
  background-color: #8c8cf1;
}

[data-theme="dark"] .menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(104, 96, 238, 0.8);
}

.menu ul li.active .menu-icon {
}

.menu ul li.active .menu-icon {
  filter: brightness(1.2);
}

.small-plan-warning img {
  width: 15%;
}
.footer-menu {
  display: flex;
  gap: 8px;
  border: 1px solid var(--border__color);
  padding: 10px 12px;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0;
  background-color: var(--body__background);
  box-sizing: border-box;
}

.footer-menu .username {
  font-size: 16px;
  color: var(--header__color);
  font-weight: 700;
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.closed-footer-menu {
  display: flex;
  gap: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  margin-top: auto;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  bottom: 30px;
}

.closed-footer-menu {
  position: absolute; 
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  z-index: 5;
  background: transparent;
}

/* .closed-footer-menu:hover{
  background-color: var(--body__background);
  width: 40px;
} */

.closed-footer-menu:has(.MuiSpeedDial-fab:hover),
.closed-footer-menu:has(.MuiSpeedDialAction-fab:hover),
.closed-footer-menu:has(.MuiSpeedDial-actions:hover) {
  background: var(--body__background);
  width: 40px;
}

.closed-footer-menu
  .MuiSpeedDial-root.MuiSpeedDial-directionUp.css-35f6ks-MuiSpeedDial-root {
  right: 8px;
}
.css-ao3q20-MuiSpeedDial-root {
  right: 0px !important;
}
img.tab-close-icon {
  cursor: pointer;
  z-index: 9;
  border-radius: 50px;
  position: absolute;
  top: 29px;
  right: -16px;
  z-index: 99;
}

img.tab-open-icon {
  cursor: pointer;
  z-index: 20;
  position: absolute;
  top: 20px;
  right: -30px;
}

/* plan expiring container design  */

.plan-expiring-container {
  background-color: var(--plan_Expiry_Box_Color);
  border: 1px solid var(--plan_Expiry_Box_Border);
  border-radius: 10px;
  padding: 25px 15px 15px 15px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}
.plan-expiring-container.collapsed-plan {
  display: none;
}
.small-plan-expiring-container {
  padding: 2px;
  background-color: var(--plan_Expiry_Box_Color);
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.small-plan-expiring-container.collapsed-plan {
  display: none;
}
.plan-warning {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
}

.plan-warning img.cancel-icon {
  position: absolute;
  right: -12px;
  top: -20px;
  width: 20px;
  height: 20px;
}
.warning-text {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.plan-expiry-message {
  font-size: 14px;
  font-weight: bold;
  color: var(--header__color);
  margin: 0;
  text-align: center;
}

.plan-expiry-action {
  font-size: 12px;
  color: var(--header__color);
  margin: 0;
  text-align: center;
}

.plan-details {
  background: #6860ee;
  padding: 10px;
  border-radius: 5%;
  width: 100%;
}

.plan-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.plan-name {
  font-size: 14px;
  font-weight: bold;
  color: #ffd700;
}

.plan-days {
  font-size: 12px;
  color: #ffffff;
}

.border-progress-bar {
  width: 100%;
  background-color: #e5e5e5;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  width: 50%;
  background-color: #7b5ef8;
}

.upgrade-button {
  display: block;
  width: 100%;
  background-color: white;
  color: #7b5ef8;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

.upgrade-button:hover {
  background-color: #7736c3;
  color: white;
}

img.warning-icon {
  width: 17%;
  position: absolute;
  top: -19px;
  left: auto;
  bottom: 0;
}

.dropdown-menu {
  width: 100%;
  max-width: inherit;
  background-color: var(--body__background) !important;
  color: var(--header__color) !important;
  max-height: 370px !important;
}

.sticky-container {
  background-color: var(--body__background) !important;
  color: var(--header__color)  !important;
}

/* account popup design */
img.drop-up-arrow {
  width: 10%;
  cursor: pointer;
}
img.speedDial-popup-icon {
  width: 50%;
}
.small-plan-warning {
  display: flex;
  padding: 6px 12px 6px 6px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}
/* Mui Nested List Design  */

.menu .MuiListItemIcon-root.css-cokf1l-MuiListItemIcon-root {
  min-width: 30px;
}

.sidebar-main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  align-items: flex-start;
}

.popup-item {
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logout-border {
  border-top: 1px solid #ccc;
}



/* Media Queries for responsiveness can be added here */

@media (min-width: 769px) {

  .side-navbar-container .side-nav.mobile-hidden {
    transform: none !important;
    gap: 24px;
  }

  .side-navbar-container {
    /* transform: translateX(0) !important; */
    box-shadow: none; /* Remove mobile shadow if any */
  }

  /* Hide mobile-specific top bar */
  .mobile-top-bar {
    display: none !important;
  }

  /* Show desktop-specific footer menus */
  .footer-menu,
  .closed-footer-menu {
    display: flex !important;
  }

  .mobile-footer-menu {
    display: none !important;
  }

  .side-navbar-container.desktop-open-tab .side-nav-header-logo-full {
    display: block !important;
  }
  .side-navbar-container.desktop-open-tab .side-nav-header-logo-minimized {
    display: none !important;
  }
  .side-navbar-container.desktop-closed-tab .side-nav-header-logo-full {
    display: none !important;
  }
  .side-navbar-container.desktop-closed-tab .side-nav-header-logo-minimized {
    display: block !important;
  }

  .side-nav-header .side-nav-toggle-icon-container {
    display: flex !important;
  }
}


/* Responsive Design - Large Screens */
@media (min-width: 1500px) {
  img.warning-icon {
    width: 50px;
  }
  
  .side-nav {
    padding: 25px 15px;
  }
  
  .navbar-logo {
    width: 85%;
  }
  
  .menu ul li {
    padding: 12px;
    font-size: 17px;
  }
  
  .menu-icon {
    width: 22px;
    height: 22px;
  }
}

/* Responsive Design - Desktop */
@media (max-width: 1500px) {
  .sub-menus {
    margin-left: 0px;
  }
}

/* Responsive Design - Small Desktop */
@media (max-width: 1200px) {
  .menu .MuiListItemIcon-root.css-cokf1l-MuiListItemIcon-root {
    min-width: 0px;
  }
  
  .navbar-logo {
    width: 75%;
  }
  
  .menu ul li {
    font-size: 15px;
  }
  
  .footer-menu .username {
    font-size: 14px;
  }
}

/* Responsive Design - Tablet */
@media (max-width: 768px) {
  .tab-open-icon,
  .tab-close-icon {
    display: none;
  }

  .sidebar-main-container {
    align-items: center;
    margin-top: 72px;
    margin-bottom: 50px;
    overflow-y: auto;
  }
  
  .side-nav {
    padding: 20px 8px;
  }
  
  .menu ul li {
    padding: 8px;
    font-size: 14px;
    gap: 8px;
  }
  
  .menu-icon {
    width: 18px;
    height: 18px;
  }
  
  .footer-menu {
    margin: 0;
    border-radius: 12px;
    padding: 8px 10px;
  }
  
  .footer-menu .MuiAvatar-root {
    width: 30px;
    height: 30px;
  }
  
  .menu {
    justify-content: flex-start;
    height: auto;
  }
  
  .menu ul {
    max-width: none;
  }
  
  .small-plan-warning img {
    width: 5%;
  }
  
  .small-plan-expiring-container {
    justify-content: flex-start;
  }
  
  .small-plan-warning {
    width: 100%;
    justify-content: space-between;
  }
  
  .side-nav {
    padding: 15px 5px;
  }
  
  .navbar-logo {
    width: 70%;
    margin-bottom: 20px;
    margin-top: 12px;
  }
  
  img.navbar-single-logo {
    width: 45px;
    height: 55px !important;
    margin-bottom: 15px;
  }
}

/* Responsive Design - Mobile */
@media (max-width: 576px) {
  .side-nav {
    padding: 12px 3px;
  }
  
  .menu ul li {
    padding: 8px 5px;
    font-size: 13px;
    gap: 6px;
    margin-bottom: 3px;
  }
  
  .menu-icon {
    width: 16px;
    height: 16px;
  }
  
  .footer-menu {
    padding: 6px 8px;
    border-radius: 10px;
    margin-top: 15px;
  }
  
  .footer-menu .MuiAvatar-root {
    width: 28px;
    height: 28px;
  }
  
  .footer-menu .username {
    font-size: 13px;
  }
  
  .navbar-logo {
    width: 65%;
    margin-bottom: 15px;
  }
  
  img.navbar-single-logo {
    width: 40px;
    height: 50px !important;
    margin-bottom: 12px;
  }
  
  .popup-item-text {
    font-size: 14px;
  }
  
  .popup-item {
    padding: 8px;
  }
}

/* Responsive Design - Small Mobile */
@media (max-width: 375px) {
  .side-nav {
    padding: 10px 2px;
    width: 220px;
  }
  
  .menu ul li {
    padding: 6px 4px;
    font-size: 12px;
    gap: 5px;
    margin-bottom: 2px;
  }
  
  .menu-icon {
    width: 14px;
    height: 14px;
  }
  
  .footer-menu {
    padding: 5px 6px;
    border-radius: 8px;
  }
  
  .footer-menu .MuiAvatar-root {
    width: 25px;
    height: 25px;
  }
  
  .footer-menu .username {
    font-size: 12px;
  }
  
  .navbar-logo {
    width: 60%;
    margin-bottom: 12px;
  }
  
  img.navbar-single-logo {
    width: 35px;
    height: 45px !important;
    margin-bottom: 10px;
  }
  
  .side-nav.mobile-hidden,
  .side-nav.mobile-visible {
    width: 220px;
  }
  
  .mobile-menu-toggle {
    padding: 6px;
  }
  
  .mobile-menu-icon {
    width: 40px;
    height: 40px;
  }
}

/* Responsive Design - Extra Small Mobile */
@media (max-width: 320px) {
  .side-nav {
    width: 200px;
  }
  
  .side-nav.mobile-hidden,
  .side-nav.mobile-visible {
    width: 200px;
  }
  
  .menu ul li {
    padding: 5px 3px;
    font-size: 11px;
  }
  
  .menu-icon {
    width: 12px;
    height: 12px;
  }
}

/* settings-popup-design  */
.theme-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5%;
}

img.Darkicon {
  width: 30px;
  height: 30px;
}

img.Lighticon {
  width: 30px;
  height: 30px;
}

.popup-item-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--header__color);
  letter-spacing: -0.2px;
}

.MuiListItemIcon-root.css-1k80kex {
  min-width: 30px;
}

.closed-footer-menu .MuiSpeedDial-actions {
  display: none;
}

.closed-footer-menu:hover .MuiSpeedDial-actions {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px; 
}

@media (max-width: 768px) {
  .mobile-avatar-dropdown .MuiPaper-root {
    left: 1px !important;
  }
}

@media (min-width: 425px) and (max-width: 768px){
  /* .side-navbar-container {
    height: 525px;
  } */

  .side-nav.mobile-visible {
    width: 220px;
  }
}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: 320px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: #e74c3c;
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: #e74c3c;
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.cephea-toast-container {
  padding: 16px;
}

.cephea-toast {
  background: var(--card__background);
  color: var(--text_color);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 52px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.cephea-toast-body {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.Toastify__close-button {
  padding: 6px;
  color: #9ca3af;
  opacity: 0.7;
}

.Toastify__toast {
  border-radius: 12px;  
  padding: 8px 12px;
}

/* Success */
.Toastify__toast--success {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  background: var(--card__background);
  color: var(--text_color);
  box-shadow: inset 0px 0 0 rgba(34, 197, 94, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

/* Error */
.Toastify__toast--error {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  background: var(--card__background);
  color: var(--text_color);
  box-shadow: inset 0px 0 0 rgba(239, 68, 68, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

/* Info */
.Toastify__toast--info {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  background: var(--card__background);
  color: var(--text_color);
  box-shadow: inset 0px 0 0 rgba(99, 102, 241, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

/* Warning */
.Toastify__toast--warning {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  background: var(--card__background);
  color: var(--text_color);
  box-shadow: inset 0px 0 0 rgba(255, 193, 7, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.45);
}
.resume-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.create-candidate-popup-outer {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
  align-items: stretch;
}
span.resume-length-span {
  border: 1px solid #6860ee;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 99px;
  margin-left: 5px;
}
.header-icon-title-button-container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.upload-type-toggle {
  display: flex;
  justify-content: center;
}

.custom-upload-toggle {
display: flex;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(104, 96, 238, 0.2);
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: none;
  background: transparent;
  color: #6860EE;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1;
  white-space: nowrap;
}

.toggle-btn:hover {
  background: rgba(104, 96, 238, 0.1);
  color: #6860EE;
}

.toggle-btn.selected {
  background: #6860EE;
  color: white; 
}

.toggle-btn.selected:hover {
  background: #5a4fd3;
}
.resume-viewer {
  width: 100%;
  padding: 10px;
  height: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
}
.Files-upload-container {
  display: flex;
  align-items: center;
  border-radius: 20px;
  width: 70%;
  margin: 2vw auto;
  /* padding: 2vw 5vw; */
  /* border: 1px solid rgba(34, 108, 226, 0.2); */
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  /* box-shadow: 0 8px 30px rgba(34, 108, 226, 0.1); */
  transition: all 0.3s ease;
  max-height: 440px;
  margin-top: -35px;
}

.uploaded-files-list::-webkit-scrollbar {
  display: none;
}

.upload-resume-container {
  width: 100%;
}

.upload-resume-container .upload-resume-header {
  margin-bottom: 0;
}

.upload-resume-header {
  margin: 0;
  color: var(--page_Header_Color);
  margin-bottom: 20px;
}

.upload-resume-header .header-main-container {
  display: flex;
  justify-content: space-between;
  width: auto;
}

.header-and-resume-button-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 990;
  background-color: var(--body__background);
  color: var(--header__color);
}

.header-and-resume-button-container .header-parser-main-container {
  display: flex;
  justify-content: space-between;
  width: auto;
}

.header-parser-main-container {
  display: flex;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9;
  padding: 2px 24px;
  border-bottom: 1px solid var(--border__color);
  height: 59px;
  /* width: 100%; */
  align-items: center;
  background-color: var(--body__background);
  color: var(--header__color);
}

.choose-file {
  color: #2992ff;
  cursor: pointer;
  /* font-family: "Outfit", sans-serif; */
  border-bottom: 1px solid #1a89fc;
  border: none;
}

.supported-file {
  font-size: 13px;
  font-weight: 500;
  color: #88898a;
  /* font-family: "Outfit", sans-serif; */
  margin-top: 0px;
}

.upload-heading {
  color: black;
  font-size: 22px;
  font-weight: 400;
  /* font-family: "Belanosima", sans-serif; */
}

.drag-drop {
  color: var(--login__container_header);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  margin: 15px 0 5px;
}

.Files-upload-container h2 {
  margin: 0;
  margin-bottom: 20px;
  /* font-family: "Outfit", sans-serif; */
}

form {
  width: 100%;
}

.Files-upload-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: 0;
  float: left;
}

.Files-upload-container input[type="file"] {
  margin-bottom: 10px;
}

.uploaded-files-name-list {
  margin-bottom: 20px;
  border: 1px solid rgba(34, 108, 226, 0.2);
  padding: 20px;
  border-radius: 16px;
  background-color: var(--body__background);
  max-height: 440px;
  width: 60%;
  margin: 2vw auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.uploaded-files-name-list h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: var(--primary__color);
  font-weight: 600;
  border-bottom: 1px solid rgba(34, 108, 226, 0.1);
  padding-bottom: 10px;
}

.file-icon img {
  width: 24px;
  height: 24px;
}

.file-name {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--header__color);
}

.delete-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: red;
  cursor: pointer;
}

/* .file-drop-container.drag-over {
  background-color: #e6f7ff;
  border-color: #1890ff;
} */

.choose-file {
  color: #1890ff;
  cursor: pointer;
}

.indexing button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 10px 25px 10px 25px;
  flex-shrink: 0;
  border-radius: 5px;
  background: #0078ff;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  /* font-family: "Outfit", sans-serif; */
}

img.status-img {
  width: 15px;
}

.indexing-contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--login__container_header);
  padding-bottom: 0px;
  width: 99%;
}

.indexing button :hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  font-size: 12px;
  position: relative;
  top: 5px;
}

.file-drop-container {
  width: 100%;
  padding: 5vw 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  background-color: var(--body__background);
  border-radius: 16px;
  border: 2px dashed rgba(34, 108, 226, 0.3);
  transition: all 0.3s ease;
  box-shadow: inset 0 0 20px rgba(34, 108, 226, 0.05);
}

.file-drop-container:hover {
  border-color: var(--primary__color);
  transform: translateY(-3px);
  box-shadow: inset 0 0 20px rgba(34, 108, 226, 0.1);
}

.file-drop-container.drag-over {
  background-color: rgba(34, 108, 226, 0.05);
  border-color: var(--primary__color);
  transform: scale(1.02);
}

.uploaded-files-notification-container {
  position: relative;
  animation: slideDown 1s ease-out forwards;
  transform: translateY(-100%);
  opacity: 0;
}

.uploaded-files-notification-container.show {
  transform: translateY(0);
  opacity: 1;
}

.tabs {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.uploaded-files-notification-container {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  align-items: baseline;
  border: 1px solid var(--border__color);
  width: 400px;
  position: absolute;
  bottom: 0;
  right: 50px;
  margin-bottom: 50px;
}

.uploaded-files-header {
  margin: 0;
  padding: 10px 20px;
  color: #fff;
  background-color: #6860ee;
  width: 100%;
  border-radius: 2px;
  width: -webkit-fill-available;
  display: flex;
  justify-content: space-between;
}

.cancel-icon {
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.modal-content h2 {
  margin-top: 0;
  font-size: 1.5rem;
  margin-bottom: 50px;
}

.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.modal-content form label {
  font-weight: 600;
  margin-bottom: 5px;
  width: 130px;
}

.modal-content form input,
.modal-content form select {
  padding: 7px;
  border: 1px solid var(--border__color);
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
}

.modal-name,
.modal-member,
.modal-status {
  display: flex;
  gap: 50px;
  outline: none;
}

.filter-checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

input:focus {
  outline: none;
}

.modal-buttons {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-filter {
  display: flex;
  flex-direction: column;
}

.filter-div {
  display: flex;
  flex-direction: row;
  gap: 100px;
}

.modal-filter label {
  font-size: large;
  font-weight: 500;
}

.uploaded-files-container .file-list-outer-div {
  width: 700px;
  display: flex;
  justify-content: space-between;
  background: #efefef;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 20px;
  text-align: left;
  float: left;
  column-gap: 20px;
  flex-direction: column;
  row-gap: 20px;
}

.uploaded-files-container .file-list-inner {
  display: flex;
  justify-content: space-between;
}

.uploaded-files-container .file-list-outer-div .file-list-inner-upload {
  display: flex;
  column-gap: 20px;
  align-items: center;
  font-size: 20px;
}

.uploaded-files-container .file-list-outer-div .file-list-inner-upload svg {
  width: 65px !important;
  height: 60px !important;
  color: #004b9e;
}

.upload-section-btn {
  column-gap: 16px;
  display: flex;
  margin-top: 20px;
}

.action-icons img.parser-table-action-icons {
  width: 24px;
  cursor: pointer;
  margin-right: 10px;
}

.sc-eUlrpB.kVMFOK.global-data-table {
  max-height: 400px;
}

.linear-progress-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: center;
  width: 100%;
}

.upload-section-btn button.cancel {
  padding: 6px 20px;
  background-color: transparent;
  color: #88898a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  border: 1px solid var(--border__color);
}

span.parsing-file-name-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.import-candidate-files-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 20px;
  overflow-y: auto;
  height: 150px;
}

span.import-candidate-model-title {
  font-size: 14px;
  color: #626262;
}

.information-icon-container {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #f7dcb6;
  border-radius: 5px;
  background: var(--information_Note_Background);
  padding: 5px 10px;
  /* width: 100%; */
  margin-top: 20px;
  margin-bottom: -25px;
}

img.information-icon {
  width: 3%;
}

span.information-span {
  color: #fb9b27;
  font-weight: 500;
  font-size: 14px;
}

.no-data-message {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.no-data-message img {
  width: 500px;
}

.maximum {
  color: #004b9e;
}

.full-screen-div .listed-files-container::-webkit-scrollbar {
  width: 6px;
}

.full-screen-div .listed-files-container::-webkit-scrollbar-track {
  border-radius: 10px;
}

.full-screen-div .listed-files-container::-webkit-scrollbar-thumb {
  background: #004e9c62;
  border-radius: 10px;
}

.full-screen-div .listed-files-container::-webkit-scrollbar-thumb:hover {
  background: #004e9c;
}

.main-resume-container {
  padding: 20px 20px;
  /* height: 100vh; */
}

.resume-header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.resume-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  margin-left: 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  z-index: 100;
  background-color: var(--body__background);
}

.left-side-button-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.left-side-button-container .parser-action-buttons {
  cursor: pointer;
  background-color: var(--body__background);
  border: 1px solid var(--border__color);
  color: var(--header__color);
  padding: 7px 15px;
}

.right-side-button-container .import-action-buttons {
  padding: 7px 15px;
}

.right-side-button-container {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-evenly;
}

@media screen and (max-width: 768px) {
  .right-side-button-container {
    margin: 10px;
  }
}

img.parsed-icon {
  width: 15%;
}

.parsed-status-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-invited {
  background-color: #b3d7ff;
  color: #0066cc;
  padding: 5px 20px;
  border-radius: 5px;
}

.status-activated {
  background-color: #c3f3d7;
  color: #0f844d;
  padding: 5px 10px;
  border-radius: 5px;
}

.status-pending {
  background-color: #ffcccc;
  color: #cc0000;
  padding: 5px 15px;
  border-radius: 5px;
}

.skeleton-row {
  display: flex;
  align-items: center;
}

.skeleton-row > div {
  flex: 1 1;
}

.filters {
  display: flex;
  gap: 10vw;
}

.filter-checkboxes {
  display: flex;
  flex-direction: column;
}

.filter-checkboxes label {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.table-span {
  display: "flex";
  width: "fit-content";
  white-space: "break-spaces";
}

.file-upload-outer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  column-gap: 20px;
  height: 500px;
}

div#root {
  /* height: 100vh; */
  position: relative;
}

.file-upload-outer .Files-list {
  opacity: 0;
}

.file-upload-outer .Files-list {
  height: 26vw;
  overflow-y: scroll;
  overflow-x: scroll;
}

.file-upload-outer.active .Files-list {
  opacity: 1;
}

.header {
  margin-left: 140px;
  padding-top: 15px;
  margin-top: 30px;
  border-radius: 10px;
}

.footer {
  display: flex;
  text-align: center;
  justify-content: center;
  display: none;
}

img.vybot-logo {
  width: 175px;
  text-align: center;
  margin: auto;
  display: flex;
}

h2.upload-heading {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

h2.upload-heading img.file-icon {
  width: 30px;
}

.file-upload-outer.active .header {
  background-color: #ffffff;
}

.header h5 {
  padding: 15px;
  border-bottom: 1px solid #ebebeb;
}

.file-upload-outer .Files-list::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.file-upload-outer .Files-list::-webkit-scrollbar {
  border-radius: 10px;
}

.file-upload-outer .Files-list::-webkit-scrollbar-thumb {
  background: var(--TreeItem__Scrollbar);
  border-radius: 10px;
}

.file-upload-outer .Files-list::-webkit-scrollbar:hover {
  background: var(--TreeItem__Scrollbar_background);
}

.file-upload-outer .indexing-table-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.file-upload-outer .indexing-table-wrapper::-webkit-scrollbar {
  border-radius: 10px;
}

.file-upload-outer .indexing-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--TreeItem__Scrollbar);
  border-radius: 10px;
}

.file-upload-outer .indexing-table-wrapper::-webkit-scrollbar:hover {
  background: var(--TreeItem__Scrollbar_background);
}

.file-upload-outer .Documents-container {
  height: 94%;
  border-radius: 10px;
  background: var(--file__upload_container);
  padding: 20px;
  cursor: pointer;
  margin: 0;
}

.file-upload-outer .Documents-container .bot-logo {
  padding-top: 10px;
}

.file-upload-outer .Documents-container .bot-logo img {
  text-align: center;
}

.Logout-container {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.Logout-container img {
  position: absolute;
  left: auto !important;
  right: 0;
  top: -26px;
}

.file-upload-outer .file-container {
  /* display: flex;
  justify-content: space-between;
  margin: 0px 0px 10px 0px;
  border-bottom: 1px solid #dadada; */
  display: flex;
  justify-content: space-between;
  border: 1px solid #dadada;
  padding: 10px;
  gap: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: var(--body__background);
}

.file-and-folder-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 5px;
  margin-bottom: 15px;
}

.file-upload-outer .file-container h5.documents {
  color: var(--login__container_header);
  /* font-family: "Outfit", sans-serif; */
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

.indexing {
  width: 95%;
  height: 31vw;
  border-radius: 10px;
  background: var(--file__upload_container);
  padding: 5px 25px;
  margin-top: 24px;
  cursor: pointer;
}

.indexing-title h4 {
  color: #000;
  /* font-family: Outfit; */
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 25px 0px 10px 0px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dadada;
}

.indexing-table-wrapper {
  max-height: 25vw;
  overflow-y: scroll;
}

.indexing-status-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0px;
  position: relative;
}

.file-upload-tbody tr {
  border: 2px solid #eaeaeaa3;
  background-color: var(--file__upload_container);
  color: var(--login__container_header);
}

.indexing-status-table th {
  padding: 16px 10px;
}

.indexing-status-table td {
  padding: 1px 10px;
  /* font-family: "Outfit", sans-serif; */
  width: 17vw;
  font-size: 14px;
}

.indexing h4.indexing-title {
  padding-bottom: 20px;
  font-size: 15px;
  /* font-family: "Outfit", sans-serif; */
  margin-bottom: 0px;
  color: var(--login__container_header);
  font-weight: 500;
}

.status-container,
.file-entry {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.indexing-status-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--file__upload_container);
  color: var(--login__container_header);
  font-size: 13px;
  text-align: left;
  /* font-family: "Outfit", sans-serif; */
  font-weight: 500;
}

.indexing-status-table .indexing-title {
  /* font-family: "Outfit", sans-serif; */
  font-size: 16px;
}

.All-uploaded-files
  .files-div
  svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-i4bv87-MuiSvgIcon-root {
  font-size: 14px;
  color: var(--login__container_header);
}

.All-uploaded-files
  .files-div
  svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-i4bv87-MuiSvgIcon-root:hover {
  color: #ca0000;
  border-radius: 50%;
  font-size: 14px;
}

.All-uploaded-files .files-div p {
  width: 100%;
  margin: 7px 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--login__container_header);
  font-size: 12px;
}

.file-upload-outer .logout-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0 !important;
  cursor: pointer;
}

.Documents-container img.logout-button {
  width: 45px;
  height: 45px;
  float: right;
}

.file-upload-outer .Logout-container {
  margin-top: 4px;
}

table :hover {
  background-color: none !important;
}

.information-page {
  width: 100%;
  height: 100%;
  background: var(--file__upload_container);
  margin-top: 20px;
  border-radius: 5px;
}

.information-page h4 {
  font-size: 15px;
  border-bottom: 1px solid var(--login__container_header);
  width: 95%;
  font-weight: 500;
  /* font-family: "Outfit", sans-serif; */
  color: var(--login__container_header);
  margin: 0 auto;
  padding: 15px 0px 10px 0px;
}

.information-page .text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 15px;
}

.text-wrapper {
  display: flex;
  align-items: center;

  margin-bottom: -14px;
}

.text-wrapper p {
  margin-left: 10px;
}

.information-page
  svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-i4bv87-MuiSvgIcon-root {
  color: #b638fac7;
}

.information-page img {
  width: 25%;
  height: auto;
  display: table;
  margin: 0 auto;
}

.folder-container span.foldername {
  flex: 0.9 1;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 20px;
  white-space: nowrap;
  color: var(--login__container_header);
  font-size: 13px;
}

.folder-container .folder-inner {
  display: flex;
  align-content: center;
  align-items: center;
  column-gap: 0px;
  justify-content: space-between;
  padding: 10px 0px 5px 0px;
  border-bottom: 1px solid #e6e6e6;
  color: var(--login__container_header);
}

.folder-contents .files-div {
  color: var(--login__container_header);
}

.no-files {
  text-align: center;
  color: red;
}

.indexing .file-entry img.file-img {
  width: 21px;
}

.file-drop-container label.file-upload-label {
  display: flex;
  align-items: center;
  flex-direction: column;
  column-gap: 10px;
}

.information-page .text-wrapper img {
  width: 11px;
}

.information-page .text-wrapper p {
  margin-left: 24px !important;
  /* font-family: "Outfit", sans-serif; */
  color: var(--login__container_header);
  font-size: 14px;
}

.information-page .text-wrapper {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.table-files-div {
  padding: 10px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #e4dfdf;
}

.table-folder-container
  svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-i4bv87-MuiSvgIcon-root {
  position: absolute;
  right: 2vw;
}

.table-folder-container .table-folder-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

tr.table-folder-content {
  background: var(--table__folder_container);
  color: var(--table__folder_Color);
}

.Files-list .css-1g86id8-MuiTreeItem-content .MuiTreeItem-iconContainer svg {
  font-size: 18px;
  fill: var(--login__container_header);
}

.css-1g86id8-MuiTreeItem-content.MuiTreeItem-content.Mui-expanded.Mui-selected {
  background: var(--TreeItem__background);
  color: var(--TreeItem__color);
}

.Files-list .css-1g86id8-MuiTreeItem-content {
  /* padding: 0 8px; */
  width: 92%;
}

.Toogle-button {
  width: 4vw !important;
  /* height: 4vw !important; */
}

.Login-footer {
  margin-top: 4vw;
  margin-left: 20px;
  font-size: 12px;
}

/* .file-upload-outer {
  padding: 20px;
} */

.uploaded-files-list {
  padding-left: 0;
  margin: 0;
  padding: 10px 20px;
  width: 100%;
  min-height: auto;
  max-height: 100px;
  overflow-y: auto;
}

.uploaded-files-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-list-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.progress-div {
  position: relative;
}

.progress-div svg {
  position: absolute;
  top: 0;
  left: -30px;
}

.progress-bar {
  background-color: #e0e0e0;
  border-radius: 5px;
  width: 100px;
  height: 10px;
  margin-left: 10px;
}

.progress-bar-inner {
  background-color: #6a5acd;
  height: 100%;
  border-radius: 5px;
}

.upload-status {
  color: green;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Responsive */

@media (max-width: 1200px) {
  .drag-drop {
    padding: 10px;
  }

  .file-drop-container {
    padding: 80px 20px;
    margin-top: 109px !important;
  }
}

@media (max-width: 950px) {
  .resume-button-container {
    display: flex;
    gap: 20px;
    flex-direction: row;
    align-items: flex-start;
  }

  .file-drop-container {
    padding: 80px 20px;
    margin-top: 109px !important;
  }
}

@media (max-width: 768px) {
  .file-drop-container {
    width: 100%;
  }

  .drag-drop {
    padding: 10px;
  }

  .file-upload-outer {
    flex-direction: column-reverse;
    height: auto !important;
  }

  /* .uploaded-files-name-list {
    width: 100%;
  } */
}

@media (max-width: 600px) {
  .file-drop-container {
    width: 100%;
  }

  .right-side-button-container {
    flex-direction: column;
    gap: 20px;
  }

  .right-side-button-container button img {
    width: 16px;
  }

  .uploaded-files-notification-container {
    width: 100%;
  }

  .no-data-message img {
    width: 350px;
  }

  .no-data-message h3 {
    font-size: 15px;
  }
}

.resume-upload-header-main-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(34, 108, 226, 0.1);
}

.header-title-icon {
  margin-right: 10px;
  width: 30px;
  height: 30px;
}

.file-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(34, 108, 226, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(34, 108, 226, 0.1);
  transition: all 0.2s ease;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

/* .table-container{
  row-gap: 10px;
} */

.file-container:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--primary__color);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.file-container:hover {
  background: rgba(34, 108, 226, 0.1);
  transform: translateX(5px);
  box-shadow: 0 3px 10px rgba(34, 108, 226, 0.1);
}

.file-container:hover:before {
  opacity: 1;
}

.file-container svg {
  color: var(--primary__color);
  transition: transform 0.3s ease;
}

.file-container:hover svg {
  transform: scale(1.1);
}

/* Custom styling for the Cancel icon */
.file-container .MuiSvgIcon-root {
  color: var(--text_color);
  transition: all 0.2s ease;
}

.file-container:hover .MuiSvgIcon-root {
  color: #ff5252;
  transform: rotate(90deg);
}

/* Animation for when files are added */
@keyframes fileAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-container {
  animation: fileAppear 0.3s ease forwards;
}

/* Styling for the file icon */
.file-name img,
.file-name svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(34, 108, 226, 0.2));
}

.steps-with-connectors {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 20px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  position: relative;
  z-index: 1;
}

.step-connector {
  width: 60px;
  height: 2px;
  border-bottom: 2px dotted #6860ee;
  margin: 0 10px;
  position: relative;
  top: 20px;
  z-index: 0;
}

@media (max-width: 700px) {
  .steps-with-connectors {
    flex-direction: column;
    gap: 0;
  }

  .step-connector {
    width: 2px;
    height: 60px;
    border-bottom: none;
    border-right: 2px dotted #6860ee;
    margin: 10px 0;
    top: 0;
    left: 20px;
  }
}

@media screen and (max-width: 600px) {
  .left-side-button-container {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding-right: 20px;
  }

  .resume-button-container button:hover {
    background-color: var(--resume-buttons-hover);
    color: var(--header__color);
  }
}

.resume-upload-container .global-data-table [data-column-id="1"],
.resume-upload-container .global-data-table .rdt_TableHeadRow > *:first-child,
.resume-upload-container .global-data-table .rdt_TableRow > *:first-child {
  flex: 0 0 60px;
}

.resume-upload-container .global-data-table .rdt_TableHeadRow > *:nth-child(2),
.resume-upload-container .global-data-table .rdt_TableRow > *:nth-child(2) {
  margin-right: 75px;
}

.resume-upload-container .global-data-table .rdt_TableHeadRow > *:nth-child(5),
.resume-upload-container .global-data-table .rdt_TableRow > *:nth-child(5) {
  margin-left: 25px;
}

.resume-upload-container .global-data-table .rdt_TableHeadRow {
  background-color: var(--table_header_backgroundcolor);
}

.resume-upload-container .global-data-table .rdt_TableHeadRow > * {
  background-color: var(--table_header_backgroundcolor);
}

.resume-upload-container .global-data-table .rdt_TableHeadRow > *:nth-child(3),
.resume-upload-container .global-data-table .rdt_TableRow > *:nth-child(3) {
  margin-right: -15px;
}

.resume-upload-container
  .global-data-table
  .rdt_TableHeadRow:has([type="checkbox"])
  > *:nth-child(2),
.resume-upload-container
  .global-data-table
  .rdt_TableRow:has([type="checkbox"])
  > *:nth-child(2) {
  margin-right: 0;
}

.resume-upload-container
  .global-data-table
  .rdt_TableHeadRow:has([type="checkbox"])
  > *:nth-child(3),
.resume-upload-container
  .global-data-table
  .rdt_TableRow:has([type="checkbox"])
  > *:nth-child(3) {
  margin-right: 70px;
}

.resume-upload-container
  .global-data-table
  .rdt_TableHeadRow:has([type="checkbox"])
  > *:nth-child(4),
.resume-upload-container
  .global-data-table
  .rdt_TableRow:has([type="checkbox"])
  > *:nth-child(4) {
  margin-right: -15px;
}

.resume-upload-container
  .global-data-table
  .rdt_TableHeadRow:has([type="checkbox"])
  > *:nth-child(6),
.resume-upload-container
  .global-data-table
  .rdt_TableRow:has([type="checkbox"])
  > *:nth-child(6) {
  margin-left: 25px;
}

.global-data-table .rdt_Table {
  table-layout: fixed !important;
}
.can-global-data-table .rdt_Table {
  table-layout: fixed !important;
}
.can-global-data-table .rdt_TableCol,
.can-global-data-table .rdt_TableHeadRow div,
.can-global-data-table .rdt_TableBody .rdt_TableCell {
  box-sizing: border-box;
  /* padding: 8px 16px; */
  /* Remove max-width to allow explicit width from column config */
  max-width: none !important;
  max-width: initial !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-data-table .rdt_TableCol,
.global-data-table .rdt_TableHeadRow div,
.global-data-table .rdt_TableBody .rdt_TableCell {
  box-sizing: border-box;
  /* padding: 8px 16px; */
  /* Remove max-width to allow explicit width from column config */
  max-width: none !important;
  max-width: initial !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.can-global-data-table .rdt_TableCol,
.can-global-data-table .rdt_TableHeadRow div,
.can-global-data-table .rdt_TableBody .rdt_TableCell {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-data-table .rdt_TableCol {
  font-size: 14px;
  background-color: #eeedff;
  color: #7979e9;
}
.global-data-table .rdt_TableCol:first-child,
.global-data-table .rdt_TableBody .rdt_TableCell:first-child {
  /* Use the width from column config, not CSS */
  max-width: none !important;
  max-width: initial !important;
}
.global-data-table .rdt_TableHeadRow div {
  background-color: var(--table_header_backgroundcolor) !important;
  color: var(--table_header_color);
  font-weight: 600;
  box-sizing: border-box;
  /* padding: 8px 16px; */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-data-table .rdt_TableBody .rdt_TableCell {
  background-color: var(--table__background);
  color: var(--header__color);
  box-sizing: border-box;
  /* padding: 8px 16px; */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-table-wrapper {
  border-radius: 5px;
}

.can-global-data-table .rdt_TableCol {
  font-size: 14px;
  background-color: #eeedff;
  color: #7979e9;
}
.can-global-data-table .rdt_TableHeadRow div {
  background-color: var(--table_header_backgroundcolor) !important;
  color: var(--table_header_color);
  font-weight: 600;
  box-sizing: border-box;
  /* padding: 8px 16px; */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.can-global-data-table .rdt_TableBody .rdt_TableCell {
  background-color: var(--table__background);
  color: var(--header__color);
  box-sizing: border-box;
  /* padding: 8px 16px; */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.can-global-table-wrapper {
  border-radius: 5px;
}
.rdt_TableHead {
  z-index: 9 !important;
}

.global-data-table .rdt_TableCol:first-child {
  color: #7979e9;
  font-size: 14px;
  max-width: 250px;
}

.global-data-table .rdt_TableBody .rdt_TableRow {
  position: relative;
  background-color: var(--table__background);
  color: var(--header__color);
  /* border: 1px solid var(--header__color); */
}

.can-global-data-table .rdt_TableCol:first-child {
  color: #7979e9;
  font-size: 14px;
  max-width: 250px;
}

.can-global-data-table .rdt_TableBody .rdt_TableRow {
  position: relative;
  background-color: var(--table__background);
  color: var(--header__color);
  /* border: 1px solid var(--header__color); */
}

.global-data-table .rdt_TableBody .rdt_TableCell {
  position: static !important;
  z-index: 1;
  max-width: 15vw;
}
.can-global-data-table .rdt_TableBody .rdt_TableCell {
  position: static !important;
  z-index: 1;
}
.global-data-table .rdt_TableBody .rdt_TableCell:first-child {
  position: static !important;
  z-index: 1;
  max-width: 250px;
}
.can-global-data-table .rdt_TableBody .rdt_TableCell:first-child {
  position: static !important;
  z-index: 1;
  max-width: 250px;
}
.subscribers-table .rdt_TableRow {
  border-bottom-style: none !important;
}

.subscribers-table .rdt_TableHeadRow {
  font-size: 15px;
}

.global-data-table {
  border: 1px solid var(--border__color);
  border-radius: 16px !important;
}
.global-data-table .sc-hbtGpV.ejfNUe {
  background-color: var(--body__background);
}

.can-global-data-table {
  border: 1px solid var(--border__color);
  border-radius: 16px !important;
}
.can-global-data-table .sc-hbtGpV.ejfNUe {
  background-color: var(--body__background);
}

.right-header .css-jcn4dz-MuiBadge-badge {
  background-color: #ff0400a3 !important;
  color: #fff !important;
  top: 6px !important;
  right: 1px !important;
}

/* MenuItem background color */
.css-1rzfaa4-MuiButtonBase-root-MuiMenuItem-root {
  background-color: var(--cards-background) !important;
  color: var(--header__color) !important;
}

.css-1rzfaa4-MuiButtonBase-root-MuiMenuItem-root:hover {
  background-color: var(--chat_tab_hover) !important;
}

.layout-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.react-datepicker__month-container {
  /* position: absolute; */
  z-index: 99;
  background-color: var(--body__background);
  top: -15px;
  left: 45px;
}
/* .css-1x6hinx-MuiCollapse-wrapper {
  padding-left: 10px;
} */

.rbc-calendar {
  position: relative;
  z-index: 0;
}

.css-cokf1l-MuiListItemIcon-root {
  justify-content: center;
}

.rbc-btn-group {
  display: flex !important;
  gap: 10px !important;
  display: none !important;
}
.rbc-btn-group button {
  border-radius: 8px !important;
  /* background-color: #fff !important;
  color: black !important; */
}

.rbc-active {
  background-color: #6860ee !important;
  color: white !important;
}

.rbc-time-view .rbc-row {
  min-height: 0px !important;
}

.candidate-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.candidate-name,
.candidate-role {
  display: flex;
  gap: 10px;
}
.start-date,
.end-date {
  display: flex;
  gap: 10px;
}
.candidate-role p {
  margin: 0;
}
.candidate-name p {
  margin: 0;
}
.candidate-details label {
  color: var(--header__color);
  display: flex;
  width: 200px;
}
.calendar-date-picker {
  border: none !important;
  padding: 5px;
  border-radius: 5px;
  width: 120px;
  background-color: var(--body__background);
  color: var(--header__color);
}
.rbc-btn-group:nth-of-type(1) {
  display: none !important;
}

.calendarschedulerIcons {
  width: 25px;
  height: 25px;
}

.time-container {
  display: flex;
  align-items: center;
  border: 1px solid var(--border__color);
  border-radius: 5px;
  padding: 5px;
  gap: 10px;
}

.css-ao3q20-MuiSpeedDial-root .MuiSpeedDial-fab {
  width: 25px;
  height: 25px;
  z-index: 0;
}

.css-54zhjy-MuiList-root {
  padding-right: 6px !important;
  padding-left: 10px !important;
  width: 100%;
}
@media (max-width: 991px) {
  .css-54zhjy-MuiList-root {
    padding-left: 0px !important;
  }
}

.css-56ny9l-MuiButtonBase-root-MuiListItemButton-root {
  justify-content: center !important;
}
.css-3pgm3u-MuiButtonBase-root-MuiListItemButton-root {
  justify-content: center !important;
}
.rbc-toolbar-label {
  margin: 10px 0 !important;
}

.rbc-time-slot {
  flex: none !important;
}

.rbc-time-column .rbc-timeslot-group {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid var(--calendar__border); */
  background-color: var(--body__background) !important; 
}

.calendar-scheduler-event {
  display: flex;
  align-items: center;
}
.moment-date {
  display: flex;
}

.rbc-day-slot .rbc-event-label {
  display: none;
}
.rbc-day-slot .rbc-event-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: normal !important;
  margin-right: 0 !important;
  width: 100% !important; 
  overflow: hidden;
  position: relative;
}

.rbc-day-slot .rbc-events-container {
  margin-right: 0 !important;
}

.rbc-today {
  background-color: var(--body__background) !important;
}

.calender-toolbar-label {
  background-color: var(--tab__background);
  color: #6860ee;
  width: -webkit-fit-content;
  width: fit-content;
  flex-grow: 0;
  padding: 5px 10px;
  font-weight: 500 !important;
  border-radius: 5px;
}

.calendar-event-container {
  height: 100%;
}

.css-1toxriw-MuiList-root-MuiMenu-list {
  padding: 0 !important;
  margin: 0 !important; 
}

.MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input {
  color: var(--header__color);
  /* border: 1px solid var(--border__color)!important; */
}

.css-1umw9bq-MuiSvgIcon-root {
  color: var(--header__color);
}

.css-lohd6h-MuiSvgIcon-root-MuiSelect-icon {
  color: var(--header__color) !important;
}

.css-qx3d94-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root {
  border: 1px solid var(--pagination__border) !important;
}

.react-tel-input .selected-flag {
  background-color: var(--body__background) !important;
  border-radius: 12px 0px 0px 12px !important;
}

.react-tel-input .flag-dropdown:hover {
  background-color: var(--body__background) !important;
  border-radius: 12px 0px 0px 12px !important;
}

.react-tel-input .flag-dropdown {
  background-color: var(--body__background) !important;
  border-radius: 12px 0px 0px 12px !important;
  border: 1px solid var(--border__color) !important;
}

.react-tel-input .selected-flag:hover {
  background-color: var(--body__background) !important;
}

.flag-dropdown .country-list {
  background-color: var(--body__background) !important;
  border: 1px solid var(--border__color) !important;
}

.flag-dropdown .country-list:hover {
  background-color: var(--body__background) !important;
}

.flag-dropdown .country-list li {
  background-color: var(--body__background) !important;
  /* border: 1px solid var(--header__color) !important; */
}

.react-tel-input .form-control {
  color: var(--header__color) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--body__background) inset !important;
  -webkit-text-fill-color: var(--header__color) !important;
}

.css-rizt0-MuiTypography-root {
  font-family: "Satoshi", sans-serif !important;
}

input::placeholder {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
}

textarea::placeholder {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
}

input {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
}

textarea {
  font-family: "Satoshi", sans-serif !important;
  font-size: 16px;
}

.rbc-time-view {
  overflow-x: hidden;
  position: relative;
  border-radius: 10px;
}

.rbc-event {
  max-width: 100%; 
  width: auto !important;
  overflow: hidden;
  box-sizing: border-box;
}

.rbc-day-slot {
  overflow: hidden;
  position: relative;
}

/* Create button styles */
.create-button {
  background-color: #6860ee !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}

.create-button:hover {
  background-color: #5c47ce !important;
  transform: scale(1.05) !important;
}

.css-vkud2w-MuiPaper-root-MuiPopover-paper-MuiMenu-paper {
  color: var(--header__color) !important;
}

@media only screen and (min-width: 1762px) and (max-width: 2560px) {
  .login-animation {
    transform: scale(1.1);
    transform-origin: center;  
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1761px) { 
  .login-animation {
    transform: scale(0.8);
    margin-top: -25px;
    transform-origin: center;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .login-animation {
    transform: scale(0.7);
    margin-top: -70px;
    transform-origin: center;
  }
} 

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .login-animation {
    transform: scale(0.6);
    margin-top: -80px;
    transform-origin: center;
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  .login-animation {
    transform: scale(0.6);
    margin-top: -40px;
    transform-origin: center;
  }
}

@media only screen and (min-width: 375px) and (max-width: 424px) {
  .login-animation {
    transform: scale(0.5);
    margin-top: -40px;
    transform-origin: center;
  }
}

@media only screen and (min-width: 320px) and (max-width: 374px) {
  .login-animation {
    transform: scale(0.5);
    margin-top: -40px;
    transform-origin: center;
  }
}

.textfield-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 15px;
}

.textfield-label {
  font-size: 16px;
  font-weight: 600;
  width: -webkit-fit-content;
  width: fit-content;
  margin-bottom: 15px;
}

.textfield-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.textfield-input-container input {
  color: var(--header__color);
  background-color: var(--body__background);
}
.textfield-input {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border: 1px solid var(--border__color);
  border-radius: 12px;
  font-weight: 500;
  color: #0b0a0ad4;
}

.password-toggle-icon {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.required-asterisk {
  color: red;
  margin-left: 2px;
  position: relative;
  top: -1px;
}

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

.sidepopup-modal-content .textfield-input-container input {
  border: 1px solid var(--border__color);
  background-color: var(--sidepopup-background);
}

@media only screen and (min-width: 2001px) and (max-width: 2643px) {

  .textfield-label {
    font-size: 26px;
  }
}

.jobs-card-container {
  background-color: var(--card__background);
  border-radius: 16px;
  padding: 16px;
  padding-top: 8px;
  box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.jobs-card-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.jobs-card-title {
  margin: 0;
  color: var(--header__color);
  font-size: 18px;
  font-weight: 600;
}
.job-headers-spans {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
span.headers-location-span {
    color: #727272;
    font-size: 13px;
    font-weight: 500;
}
span.headers-client-span {
  color: var(--text-color-accent);
  font-weight: 500;
  font-size: 14px;
}
.confirmation-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 50 !important;
}

.tag-pill {
  background-color: #efe9ff;
  color: #6f42c1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.job-header-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.jobs-card-header {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--card__border);
  padding: 10px 0;
  align-items: center;
  text-align: left;
  width: 100%;
  justify-content: space-between;
}

.job-card-right-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 15px;
}

.job-priority-icon {
  width: 20px;
  height: 20px;
  display: block;
  cursor: default;
}

.jobs-card-tags {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.edit-icon-container {
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid #6860ee;
  position: relative;
  z-index: 5;
}

.edit-icon-container:hover {
  background-color: #d9d9ff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 8px rgba(104, 96, 238, 0.3);
}

.edit-icon {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
}

.jobs-card-info {
  display: flex;
  color: var(--text-color-accent);
  font-size: 1rem;
  align-items: center;
  gap: 30px;
  padding: 10px 0px;
}
.jobs-card-info div {
  display: flex;
  align-items: center;
}

.jobs-card-action {
  cursor: pointer;
  display: flex;
  gap: 15px;
  /* flex-wrap: wrap;  */
}
.contact-person-container {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 2px;
}
.jobs-card-action .view-job,
.jobs-card-action .assign-candidate {
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
  background: none;
}

@media (max-width: 768px) {
  .jobs-card-action .view-job,
  .jobs-card-action .assign-candidate {
    font-size: 0.9rem;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .jobs-card-action .view-job,
  .jobs-card-action .assign-candidate {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}

.jobs-card-header img {
  width: 25px;
}

.jobs-card-info img {
  width: 22px;
}

.jobs-card-info-details {
  display: flex;
  gap: 5px;
}

.jobs-card-info-details span {
    color: var(--text-color-accent);
    font-weight: 600;
    text-align: left;
}

.settings-icon {
  display: flex;
  align-items: center;
}

/* Popup Styles - Consistent styling for all popups in the application */

/* Common styles for all popup types */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* animation: fadeIn 0.15s ease-out; */
  will-change: opacity;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.copy-link-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  will-change: opacity;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

/* Center popup container */
.popup-container {
  background-color: white;
  background-color: var(--body__background, white);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: 90vw;
  width: auto;
  overflow: hidden;
  /* animation: scaleIn 0.15s ease-out; */
  will-change: transform, opacity;
  border: 1px solid var(--border__color);
  transform: scale(1);
  opacity: 1;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease-out;
  transform-origin: center;
}

.copy-link-popup-container {
  background-color: white;
  background-color: var(--body__background, white);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: fadeIn 0.2s ease-in-out;
  border: 1px solid var(--border__color);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #6860ee;
  background-color: var(--popup-header-background, #6860ee);
  color: white;
  color: var(--popup-header-text, white);
  border-radius: 16px 16px 0 0;
}
.session-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(135deg, #554ACF 0%, #9167E4 100%);
  color: white;
  color: var(--popup-header-text, white);
  border-radius: 16px 16px 0 0;
  height: 30px;
}
.sidepopup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: var(--body__background);
  color: white;
  color: var(--popup-header-text, white);
  border-radius: 16px 16px 0 0;
}
.filter-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  color: var(--header__color);
  border-radius: 16px 16px 0 0;
}

.copy-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #6860ee;
  background-color: var(--popup-header-background, #6860ee);
  color: white;
  color: var(--popup-header-text, white);
  border-radius: 6px 6px 0 0;
}

.popup-title-container {
  display: flex;
  flex-direction: column;
}

.popup-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: white;
  line-height: 1.2;
}

.popup-subtitle {
  font-size: 16px;
  font-weight: 400;
  margin: 4px 0 0 0;
  color: rgba(255, 255, 255, 0.9);
}

.popup-close {
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  color: var(--popup-header-text, white);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.popup-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.popup-content {
  padding: 24px;
  flex: 1 1;
  overflow-y: auto;
  min-height: 0;   
  display: block;           
  margin-top: 10px;
}
.session-popup-content {
  flex: 1 1;
  overflow-y: auto;
  min-height: 0;   
  display: block;           
  margin-top: 10px;
}
.popup-header,
.popup-actions {
  flex-shrink: 0;
}

.filter-popup-content {
  padding: 24px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
}

img.share-icons {
  width: 25px;
  height: 25px;
}

.copy-icons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.copy-popup-content {
  padding: 24px 20px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  gap: 18px;
}
.popup-field {
  margin-bottom: 20px;
  width: 100%;
  /* display: grid;
  grid-template-columns: 1fr 1fr; */
}
.recent-popup-field {
  display: flex;
  align-items: center;
  gap: 12px; 
}
.popup-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  /* color: var(--text-primary, #333); */
}

.popup-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid var(--border__color);
  border-radius: 12px;
  background-color: transparent;
  transition: border-color 0.15s ease;
}

.popup-input:focus {
  outline: none;
  border-color: #6860ee;
}

.popup-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Popup footer with actions */
.popup-actions {
  display: flex;
  justify-content: center;
  padding: 16px 24px 24px;
  gap: 16px;
}

.popup-button {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  min-width: 120px;
  text-align: center;
  transition: all 0.2s ease;
}

.popup-button-cancel {
  background-color: transparent;
  color: #aaaaaa;
  border: 1px solid #aaaaaa;
}

.popup-button-cancel:hover {
  background-color: rgba(170, 170, 170, 0.1);
}

.popup-button-primary {
  background-color: #6860ee;
  color: white;
  border: none;
}

.popup-button-primary:hover {
  background-color: #5a52d8;
}

.popup-button-primary:disabled {
  background-color: #b0b0b0;
  cursor: not-allowed;
}

.popup-button-danger {
  background-color: #e02e2a;
  color: white;
  border: none;
}

.popup-button-danger:hover {
  background-color: #c02826;
}

.popup-button-danger:disabled {
  background-color: #b0b0b0;
  cursor: not-allowed;
}
/* Side popup specific styles */
.side-popup-container {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 40%;
  max-width: 600px;
  background-color: white;
  background-color: var(--body__background, white);
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* animation: slideIn 0.25s ease-out; */
  will-change: transform;
  border-radius: 16px 0 0 16px;
  transform: translateX(0);
  transition: transform 0.25s ease-out;
}

/* Confirmation popup (smaller, focused) */
.confirmation-popup {
  width: 400px;
  /* text-align: center; */
}

.confirmation-message {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
    font-weight: 600;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }

  70% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.popup-overlay {
  /* animation: fadeIn 0.15s ease-out; */
  will-change: opacity;
}

.popup-container {
  /* animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); */
  will-change: transform, opacity;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0.7;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.side-popup-container {
  /* animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); */
  will-change: transform, opacity;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .side-popup-container {
    width: 90%;
  }

  .popup-container {
    width: 95%;
    max-height: 80vh;
  }
}

.copy-field {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.share-job-message-field {
  position: relative;
  width: 100%;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  background-color: transparent;
  overflow: hidden;
}

.share-job-message-input {
  width: 100%;
  min-height: 170px;
  padding: 12px 44px 12px 12px;
  border: none;
  background-color: transparent;
  color: var(--header__color);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  white-space: pre-wrap;
}

.share-job-message-input:focus {
  outline: none;
}

.share-job-message-field:focus-within {
  border-color: #6860ee;
}

.share-message-copy-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
}

img.copy-icon {
  width: 25px;
  height: 25px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Form Styles - Consistent styling for all forms in the application */

/* Container for forms */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Form section container */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border__color);
  background-color: rgba(104, 96, 238, 0.03);
  background-color: var(--section-background, rgba(104, 96, 238, 0.03));
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
  margin-bottom: 10px;
}

/* Row with multiple fields */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.form-row > div {
  flex: 1 1;
  min-width: 200px;
}

/* Form field container */
/* .form-field {
  margin-bottom: 20px;
} */

/* Form labels - consistent styling */
.form-label {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--header__color);
  display: block;
}

/* Required field indicator */
.required-field::after {
  content: "*";
  color: #d32f2f;
  margin-left: 4px;
}

/* Input styling - consistent across all inputs */
.form-input {
  width: -webkit-fill-available;
  padding: 10px 12px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text__color);
  background-color: transparent;
  background-color: var(--input-background, transparent);
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #6860ee;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

/* Error state */
.form-input.error {
  border-color: #d32f2f;
}

.error-message {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 4px;
}

/* Form actions container */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .form-row > div {
    width: 100%;
  }
}

/* Checkbox and radio button styling */
.form-checkbox-container, 
.form-radio-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.form-checkbox-label,
.form-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Select styling */
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border__color);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text__color);
  background-color: transparent;
  background-color: var(--input-background, transparent);
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
} 
.jobs-side-dialog-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jobs-side-dialog-card-header img {
  width: 25px;
}

.jobs-side-dialog-card-header img {
  width: 25px;
}

.job-share-icons-container img {
  width: 25px;
  cursor: pointer;
}

h3.recommented-jobs-card-header {
  text-align: left;
}

.job-subtitle {
  color: rgb(119 115 115);
  margin: 0;
  font-size: 12px;
  width: "fit-content";
}

.jobs-side-dialog-card-header-outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jobs-side-dialog-card-right-header {
  display: flex;
  gap: 5px;
  margin-right: -20px;
  /* margin-left: 20px; */
}

.card-inderview-button-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 15px;
}
h3.interview-schedule-header {
    margin-top: 0;
    color: #645ce5;
}
.interview-schedule-container {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: var(--body__background);
}
.interview-schedule-header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.interview-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.interview-detail-item p {
  margin: 0;
  font-size: 14px;
}

.card-interview-button-container {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: flex-end;
}
img.info-icon {
  width: 25px;
  height: 25px;
}

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

.job-table-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.job-table-view-button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.job-table-view-button:hover {
  background-color: transparent;
}

.job-table-view-button img {
  width: 24px;
  display: block;
}

.candidate-information-container {
  display: flex;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  margin-top: 3vw;
}

.candidate-information {
  padding: 0px 15px;
  border-right: 1px solid var(--border__color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.candidate-information-editable {
  width: 100%;
  padding: 0px 15px;
  border-right: 1px solid var(--border__color);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.jobs-header-and-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

h3.candidate-value {
  margin-bottom: 0px;
  margin-top: 0px;
}

h4.info-header-value {
  color: #6a69eb;
  margin-bottom: 0px;
  margin-top: 0px;
}

.job-tabs-container {
  display: flex;
  margin-top: 2vw;
}

.job-tab-active {
  color: #6860ee;
  border-bottom: 4px solid #6860ee;
}

.job-tabs-container .tab {
  padding: 15px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.job-content-container {
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--search-input-section-border);
}

.job-content-container p {
  font-size: 16px;
  /* color: var(--login__container_header); */
}

h3.assign-candidate-header-text {
  color: #7574ec;
}

.assign-candidate-header {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
  /* margin-top: 1vw; */
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.page-selector-container-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
  z-index: 8;
  background-color: var(--body__background);
  padding-top: 25px;
}



.jobs-main-container {
  width: 100%;
}

.jobs-outer-container {
  border-radius: 5px;
  text-align: center;
  padding: 0 10px 10px 10px;
}

.jobs-table-search-container {
  width: 100%;
  margin-bottom: 10px;
}

.cephea-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  width: 100%;
  background-color: var(--body__background);
}

.jobs-statuslegend {
  display: flex;
  gap: 20px;
}

.disabled-button {
  background-color: #cccccc !important;
  color: #666666 !important;
  opacity: 0.6;
  cursor: not-allowed;
  border: 1px solid #aaaaaa;
}

.disabled-button:hover {
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed;
}

.jobs-table-list-container {
  display: flex;
  justify-content: center;
}

.jobs-table-list-container.jobs-table-mode-container {
  height: calc(100vh - 64px);
  overflow: hidden;
}

.jobs-table-mode-container .jobs-main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.jobs-table-mode-container .jobs-outer-container {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.jobs-table-list-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 10px;
  row-gap: 10px;
  grid-column-gap: 20px;
  column-gap: 20px;
  /* padding: 15px; */
  border-radius: 5px;
  min-height: 300px;
  margin-right: 2px;
  /* max-height: 500px; */
}

.job-page-selector-container-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 64px;
  z-index: 8;
  background-color: var(--body__background);
  padding: 20px;
  width: -webkit-fill-available;
}

.job-page-selector-container-wrapper.jobs-table-mode-sticky {
  position: relative;
  top: auto;
  z-index: 20;
  padding-top: 8px;
  padding-bottom: 10px;
}

.jobs-table-results {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.jobs-table-results .global-table-wrapper {
  width: 100%;
  overflow: hidden;
}

.jobs-table-results .jobs-global-data-table {
  border-radius: 16px !important;
}

.job-fit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.job-fit-pill-top-fit {
  color: #16a34a;
  background-color: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.45);
}

.job-fit-pill-good-fit {
  color: #2563eb;
  background-color: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.45);
}

.job-fit-pill-partial-fit {
  color: #d97706;
  background-color: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.job-fit-pill-unlikely-fit {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.job-fit-pill-n-a {
  color: var(--header__color);
  background-color: var(--body__background);
  border: 1px solid var(--border__color);
}

.icon-status div {
  cursor: pointer;
}

.tags-instruction {
  margin: 0;
  font-style: italic;
}

.col2 {
  display: flex;
  gap: 2%;
}

.job-client-fields-container {
  width: 100%;
  margin-bottom: 15px;
}

@media (max-width: 860px) {
  .col2 {
    flex-wrap: wrap;
    width: 100%;
  }
}

.job-client-fields-container .MuiAutocomplete-root {
  width: 100% !important;
}

.job-client-fields-container .MuiAutocomplete-root .MuiOutlinedInput-root {
  height: 40.5px !important;
  min-height: 40px !important;
}

.job-client-fields-container .MuiAutocomplete-root .MuiInputBase-input {
  height: 40px !important;
  padding: 8px 12px !important;
}

.job-client-contact-openings-row .MuiFormControl-root {
  width: 100% !important;
}

.job-client-fields-container .MuiFormHelperText-root,
.job-client-contact-openings-row .MuiFormHelperText-root {
  color: #ff0000 !important;
  margin-left: -1px;
  font-size: 14px;
  margin-top: -2px;
}

@media (max-width: 1000px) {
  .jobs-table-list-card-container {
    display: flex;
    flex-wrap: wrap;
  }
}

.jobs-header-button-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  gap: 6px;
}

.jobs-filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex-wrap: wrap;
}

.jobs-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.jobs-list-buttons {
  display: flex;
  align-items: center;
}

.member-stage-popup-body {
  overflow-x: hidden !important;
}

.member-job-type-filter-options {
  display: flex !important;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
  width: 100%;
}

.member-job-type-filter-option {
  min-width: 0 !important;
  flex: 1 1;
  justify-content: center;
  padding: 7px 10px !important;
}

.jobs-filter-controls .filter-stages-btn {
  background: var(--body__background) !important;
  color: var(--header__color) !important;
  border: 1px solid var(--border__color) !important;
  min-width: 48px;
}

.jobs-filter-controls .filter-stages-btn.active {
  border-color: #6860ee !important;
  background: rgba(104, 96, 238, 0.08) !important;
}

.jobs-filter-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: var(--body__background);
  border: 1px solid var(--border__color);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  z-index: 50;
}

.jobs-filter-popup-title {
  color: var(--header__color);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.jobs-filter-popup-subtitle {
  color: var(--text__color);
  font-size: 12px;
  text-align: left;
  margin-top: 2px;
  margin-bottom: 12px;
}

.jobs-filter-popup-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jobs-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jobs-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--header__color);
  text-align: left;
}

.jobs-filter-select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--body__background);
  color: var(--header__color);
  outline: none;
  font-size: 14px;
}

.jobs-filter-select-wrapper {
  position: relative;
}

.jobs-filter-select-placeholder {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9aa0a6;
  pointer-events: none;
  z-index: 1;
}

.jobs-filter-select.jobs-filter-select--empty {
  color: transparent;
}

.jobs-filter-select.jobs-filter-select--empty option {
  color: var(--header__color);
}

.jobs-filter-select:focus {
  border-color: #6860ee;
}

.jobs-view-selection {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.jobs-my-jobs-toggle {
  background: transparent;
  color: var(--header__color);
  border: 1px solid var(--header__color);
  padding: 6px 10px;
  border-radius: 100px;
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.jobs-my-jobs-toggle:hover {
  border-color: #6860ee;
  background-color: rgba(104, 96, 238, 0.05);
}

.jobs-my-jobs-toggle.active {
  background: rgba(104, 96, 238, 0.16);
  background: var(--all-tracked-created-selected-bg, rgba(104, 96, 238, 0.16));
  color: #ffffff;
  color: var(--all-tracked-created-selected-text, #ffffff);
  border-color: #7c74ff;
  border-color: var(--all-tracked-created-selected-text, #7c74ff);
  transform: translateY(-1px);
}

.jobs-my-jobs-toggle img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.jobs-filter-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--body__background);
  color: var(--header__color);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

.jobs-filter-option:hover {
  border-color: #6860ee;
}

.jobs-filter-option.active {
  border-color: #6860ee;
  background: rgba(104, 96, 238, 0.1);
}

.jobs-filter-option img {
  width: 16px;
  height: 16px;
}

.jobs-filter-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.jobs-filter-popup-actions > * {
  flex: 1 1;
}

/* @media (max-width: 1000px) {
  .jobs-header-button-container {
    margin: 10px;
  }
} */
@media (max-width: 392px) {
  .jobs-header-button-container {
     margin: 10px 0;
  }
}
.back-to-job-list-button {
  display: flex;
  align-items: center;
}

.jobs-header-button-container .create-button {
  background-color: #6860ee !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}

.jobs-header-button-container .create-button:hover {
  background-color: #5c47ce !important;
  transform: scale(1.05) !important;
}

.jobs-header-button-container button:hover {
  background-color: #5946c4 !important;
}

.job-edit-actions {
  display: flex;
  /* align-items: center; */
}

.salary-inputs {
  display: flex;
  gap: 10px;
}

.candidate-info-outer-container {
  display: flex;
  border: 1px solid var(--border__color);
  border-radius: 16px;
  margin-bottom: -15px;
}

.candidate-exp-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.candidate-loc-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.candidate-salary-min-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.candidate-salary-max-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.candidate-jobtype-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.candidate-openings-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 1025) {
  .jobs-side-dialog-overall-container {
    width: 100%;
  }
}

.candidate-info-outer-container .candidate-information:last-child {
  border-right: none;
}

.candidate-info-outer-container input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: -webkit-fill-available;
}

.candidate-info-outer-container input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

.buttonoptions {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.buttonoptions .buttonactive {
  background: #6860ee;
  color: #fff;
  font-weight: 500;
}

.buttonoptions .buttoninactive {
  background: var(--body__background);
  color: var(--border__color);
  font-weight: 400;
}

.buttonoptions button {
  min-width: 100px;
  border: none;
}

/* .assigned-candidates-heading {
  display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-top: 1vw;
} */

/*Responsive CSS*/

@media screen and (max-width: 1280px) {
  .jobs-table-list-card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1024px) {
  .candidate-info-outer-container {
    display: flex;
    flex-direction: column;
  }

  .candidate-information {
    width: -webkit-fill-available;
    padding: 0px 15px;
    border-right: none;
    flex-direction: row;
    margin: 10px 0px;
  }

  .candidate-information .info-header {
    width: 300px;
  }

  .assign-candidate-header {
    flex-direction: row;
  }

  .jobs-side-dialog-card-header-outer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .jobs-table-list-card-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  .candidate-information {
    flex-direction: column;
  }
}

.title-edit-icon-container {
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid #6860ee;
  position: relative;
  z-index: 5;
}

.title-edit-icon-container:hover {
  background-color: #d9d9ff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 8px rgba(104, 96, 238, 0.3);
}

.title-editer {
  height: 50px;
  width: 50px;
  margin-top: 30px;
  margin-left: 12px;
}

.no-op-skill-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-direction: column;
}

.no-op-skill-title {
  display: flex;
  flex-direction: row;
}

.bot-message-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  max-width: 95%;
}

/* .bot-message-content {
  background: var(--body__background);
  border: 1px solid #e0e0e0;
  padding: 15px;
  border-radius: 8px;
  max-width: 80%;
  margin-left: 10px;
  max-width: 95%;
} */
.bot-message-content {
  flex-grow: 1;
  width: 100% !important;
  background-color: var(--body__background);
  padding: 15px 20px;
  border-radius: 0px 20px 20px 20px;
  border: 1px solid var(--border__color);
  font-size: 0.95em;
  line-height: 1.4;
  word-break: break-word;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.job-user-message-query-text {
  margin: 6px;
  text-align: left;
}
.styled-scrollbar {
  height: 50px !important;
}
@media (max-width: 991px) {
  .jobs-side-dialog-overall-container {
    max-height: calc(100vh - 150px) !important;
    height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .jobs-side-dialog-overall-container > * {
    flex-shrink: 0;
  }
  .job-content-container {
    min-height: 50%;
  }
}
.skill-title {
  display: flex;
  flex-direction: row;
}
.skill-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-direction: column;
  margin-bottom: 15px;
}
.job-description-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.job-description-sub-label {
  color: var(--text-color-accent);
  font-size: small;
}
.kanban-container {
  display: flex;
  gap: 20px;
  padding: 10px 4px;
  /* background-color: #f5f5f7; */
  /* min-height: 100vh; */
  /* overflow-y: auto; */
  /* margin-top: -2vw; */
}

.kanban-scroll-synced {
  width: 100%;
  margin-top: -2vw;
}

.kanban-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
}

.kanban-scroll-top-inner {
  /* width: 5150px; */
  height: 1px;
}

.kanban-scroll-bottom {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kanban-scroll-bottom::-webkit-scrollbar {
  display: none;
}


.kanban-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  direction: rtl;
  max-width: 100%;
  padding-bottom: 1px;
}



.kanban-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
}

.kanban-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  bottom: 40px;
  /* right: 220px; */
}

.filter-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--header__color);
}

.column-visibility-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background-color: var(--body__background);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--header__color);
}

.column-visibility-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  background-color: var(--body__background);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 12px;
  z-index: 100;
  margin-top: 5px;
  border: 1px solid var(--border__color);
  height: 300px;
  overflow-y: auto;
}

.column-checkbox-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.column-checkbox-item:last-child {
  border-bottom: none;
}

.column-checkbox-item label {
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
  flex: 1 1;
}

.column-checkbox-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: #6860ee;
}

.column-checkbox-item:first-child {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.column-checkbox-item .view-button {
  padding: 6px 10px;
  background-color: #f5f5f7;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.column-checkbox-item .view-button:hover {
  background-color: #e5e5e7;
}

.kanban-column {
flex: 1 1;
background: var(--body__background);
border-radius: 20px;
min-width: 280px;
min-height: 500px;
height: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #E2E8F0;
}

.kanban-column.has-cards {
  background: var(--kanban-background-with-card);
  border: 2px solid #bcb3f7;
  box-shadow: 0 4px 16px rgba(92, 44, 203, 0.07);
}

.column-highlight {
background-color: var(--accordian-background) !important;
/* background-color: rgb(119, 0, 255) !important; */
/* box-shadow: 0 0 0 2px rgba(92, 44, 203, 0.5) !important; */
transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.kanban-column:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.column-card-container {
padding: 16px;
transition: background-color 0.2s ease;
min-height: 200px;
height: 100%;
border-radius: 20px;
}

.column-card-container.drop-active {
background-color: rgba(0, 0, 0, 0.03);
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--body__background);
  border-bottom: 1px solid #E2E8F0;
  padding: 6px 16px;
  border-radius: 20px 20px 0 0;
  height: 70px;
}
.column-header.has-cards {
  border-bottom: 2px solid #bcb3f7 !important;
}

.column-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
}

.column-count {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  color: white;
  background-color: #6860ee;
}
.kanbanboard-border { border-left: 4px solid #6860ee; }
.candidate-card {
background: white;
border-radius: 12px;
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
will-change: transform, opacity;
cursor: grab;
}

.candidate-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.candidate-card:active {
cursor: grabbing;
transform: scale(1.02);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.view-button {
  background-color: transparent;
  color: #666;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.view-button:hover {
  background-color: #f0f0f0;
}

.skill-tag {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 6px;
  margin-bottom: 6px;
  border-radius: 12px;
  font-size: 12px;
  background-color: #E0DEFF;
  color: #2D23DB;
}

.candidate-info {
  padding: 12px;
}

.candidate-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.candidate-role {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.candidate-exp {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.skills-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}

.view-button-container {
display: flex;
justify-content: flex-end;
/* padding: 12px; */
margin-top: 8px;
}

.view-button {
height: 30px;
width: 70px;
background: var(--body__background); 
border-radius: 8px;
cursor: pointer;
padding: 2px 14px;
border: 1px solid #6860EE;
font-family: Satoshi;
font-weight: 600;
font-size: 14px;
outline: none;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
gap: 10px;
color: #6860EE;
transition: all 0.3s ease;
}

.view-button:hover {
background: #6860EE;
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(104, 96, 238, 0.2);
}

.candidate-card {
background: var(--body__background);
border-radius: 20px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.candidate-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}

/* .tile-header-container {
padding: 12px;
} */

.tile-header-text {
display: flex;
gap: 4px;
justify-content: space-between;
}

.tile-header-text span {
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
font-weight: 600;
}

.tile-subheader {
font-size: 14px;
font-weight: 500;
color: #555555;
/* color: var(--job-Description_Color); */
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
}

.card-skills {
margin-top: 12px;
}

.skills-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.card-skills-div {
display: inline-block;
}

.skill-badge {
display: inline-block;
padding: 4px 12px;
background: var(--skill-badge-bg);
color: var(--skill-badge-color);
border: 1px solid var(--skill-badge-border);
border-radius: 16px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 68px;
}

.empty-state {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.skills-text {
 display: flex;
 gap: 8px;
}

/* Responsive CSS */

@media screen and (max-width: 1024px) {
.kanban-scroll-synced {
  margin-top: 2vw;
}

.filter-container {
  bottom: 0px;
  right: -19px;
}

.kanban-column {
  min-width: 250px;
  min-height: 450px;
}

}
.accordion-item {
  width: 100%;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 5px;
}
.accordion-inner-header-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
/* .accordion-header:hover {
  background-color: #e0e0e0;
} */

.accordion-title {
  font-weight: bold;
}

.accordion-icon {
  transition: transform 0.3s;
}

.accordion-icon.rotate {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 15px;
  background-color: var(--body__background);
  max-height: 300px;
  overflow: auto;
}

img.drop-down-icon {
  width: 22px;
}

span.accordion-count {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  color: white;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--card__border);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 2px 10px 2px rgb(0 0 0 / 1%);
  text-align: left;
  height: -webkit-fill-available;
  min-width: 0;
  overflow: hidden;
}

.card-subheader-candidate {
  color: var(--text-color-accent);
  font-weight: 500;
  font-size: 14px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.candidate-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-and-tags {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-header-user {
  display: flex;
  width: 100%;
}

.card-header-status {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 60%;
  justify-content: flex-end;
}

.profile-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.card-header-text {
  flex: 1 1;
}

.card-header-text h3 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  color: var(--header__color);
  /* width: 230px; */
  width: -webkit-max-content;
  width: max-content;
}

.card-header-text p {
  margin: 2px 0;
  font-size: 14px;
  color: var(--job-Description_Color);
}

.card-status {
  text-align: right;
}

.status-badge {
  padding: 5px 10px;
  font-size: 12px;
  color: #fff;
  border-radius: 25px;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-details p {
  margin: 5px 0;
  font-size: 14px;
  color: var(--header__color);
}

.card-details-span-candidate {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-details-span-candidate p {
  margin: 0;
  font-size: 14px;
  color: var(--text-color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

img.card-candidate-icon {
  width: 25px;
}
.card-exp-details-span {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.card-skills {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.skills-container {
  display: flex;
}

.card-skills p {
  margin: 0;
  color: var(--header__color);
}

.card-skills-div {
  display: flex;
  flex-wrap: wrap;
}

.skill-badge {
  display: inline-block;
  padding: 5px 10px;
  /* margin: 2px; */
  border-radius: 15px;
  font-size: 12px;
  color: var(--skill-badge-color);
  background: var(--skill-badge-bg);
  border: 1px solid var(--skill-badge-border);
}

.skill-tooltip-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  color: rgb(45, 35, 219);
  background: rgb(224, 222, 255);
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 15px;
  gap: 15px;
  align-items: center;
}

/* .contact-info img {
  width: 25px;
  height: 25px;
} */
.candidate-icon {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 10%;
}

.view-container {
  display: flex;
  /* justify-content: flex-end; */
  margin-bottom: 4px;
  gap: 10px;
  flex-wrap: wrap;
}

.view {
  border: 1px solid var(--border__color);
  border-radius: 5px;
  color: var(--header__color);
  background-color: var(--body__background);
  height: -webkit-fit-content;
  height: fit-content;
  padding: 5px 10px;
  cursor: pointer;
}

.card-header-text-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: -webkit-fill-available;
}

.applications-count-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--skill-badge-bg);
  border: 1px solid var(--skill-badge-border);
  color: var(--skill-badge-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.applications-tooltip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 300px;
  max-height: 100px;
  overflow-y: auto;
}

.applications-tooltip-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 15px;
  background: var(--skill-badge-bg);
  border: 1px solid var(--skill-badge-border);
}

.applications-tooltip-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--skill-badge-color);
}

.applications-tooltip-stage {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
}

.skills-and-view-candidate-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1px;
}
.thinking-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 10px 16px;
  border: 1px solid var(--border__color);
  border-radius: 18px 18px 18px 4px;
  background: transparent;
}

.thinking-bubble__label {
  font-style: italic;
  font-size: 14px;
  opacity: 0.7;
  color: var(--chat-text);
  animation: thinking-bubble-word 0.35s ease;
}

@keyframes thinking-bubble-word {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

.thinking-bubble__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.thinking-bubble__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6860ee;
  animation: thinking-bubble-bounce 1.2s infinite ease-in-out both;
}

.thinking-bubble__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.thinking-bubble__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes thinking-bubble-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.recommended-search-container {
  padding: 15px 15px 0 15px;
  background-color: var(--body__background);
  border: 1px solid var(--global-search-container-border);
  border-radius: 16px; /* smoother corners */
  margin-top: 20px;
}
.recommended-search-container textarea:focus {
  border: 1px solid var(--search-input-section-border);
  outline: none !important;
  box-shadow: none !important;
}
.recommended-search-container textarea {
  resize: none;
}
.jd-field-with-button {
  display: flex;
  width: 100%;
  align-items: center;
}
.recommended-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -15px -15px 0 -15px;
  padding: 8px 16px;
  /* background-color: #F6FAFF; faint blue background like Figma */
  background-color: var(--search-header-background-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-bottom: 15px;
}

.recommended-search-header.collapsed {
  margin-bottom: 0 !important;
}

.jelly-icon {
  width: 20px;
  height: 30px;
}

.recommended-search-title {
  font-size: 18px;
  font-weight: bold;
  /* color: #1669D8; */
  color: var(--search-title-color);
}

.recommended-search-subtext {
  font-size: 14px;
  color: var(--search-subtext-color);
  font-style: italic;
  margin-left: auto;
}

/* Right-aligned action container inside the header */
.recommended-header-actions {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
}

.rec-search-input-section-wrap {
  padding-bottom: 15px;
  background-color: var(--body__background);
}

.rec-search-input-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
}

/* Keep trailing action buttons aligned with the search button */
.rec-inline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}

.rec-inline-actions-left {
  margin-left: 0;
  margin-right: 10px;
}

/* Chat with Cephea pill button look */
.cephea-chat-pill {
  background: #FFFFFF;
  color: #2D23DB;
  border: 2px solid #7E7AF2;
  border-radius: 24px;
  padding: 10px 16px !important;
}

.cephea-chat-pill:hover {
  background: #6665EA;
  color: #FFFFFF;
}

.toggle-icon {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.toggle-icon.collapsed {
  transform: rotate(180deg);
}


.sidepopup-modal-content .recommended-search-header {
  display: none;
}

.sidepopup-modal-content .recommended-search-container {
  margin-top: 8px;
  padding: 0px;
  border-radius: 0px;
  border: none;
  background-color: var(--sidepopup-background);
}

.sidepopup-modal-content .rec-search-input-section-wrap {
  background-color: var(--sidepopup-background);
}

.sidepopup-modal-content .search-box-bottom {
  bottom: -30px;
  padding: 0px;
  background-color: var(--sidepopup-background);
}

/* .sidepopup-modal-content .search-header {
  display: none;
} */

/* .sidepopup-modal-content .global-search-container {
  margin-top: 8px;
  padding: 0px;
  border-radius: 0px;
  border: none;
  box-shadow: none;
} */

.sidepopup-modal-content .global-search-container textarea {
  background-color: var(--sidepopup-background) !important;
}

.sidepopup-modal-content .search-box-bottom .search-input-section-wrap {
  background-color: var(--sidepopup-background);
}

.sidepopup-modal-content .rec-search-input-section-wrap textarea {
  background-color: var(--sidepopup-background) !important;
}

.sidepopup-modal-content .search-input-section {
  padding: 10px 0px 10px 0px;
}
.vybog-chat-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.vybog-chat-popup-overlay.dark-mode {
  background: rgba(0, 0, 0, 0.82);
}

.vybog-chat-popup {
  position: relative;
  width: min(488px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  border-radius: 20px;
  background: #ffffff;
  padding: 22px 24px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  color: #111111;
  font-family: inherit;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  touch-action: auto;
}

.vybog-chat-popup.dark-mode {
  border: 1px solid #2c2c35;
  background: #15151b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  color: #f5f5f8;
}

.vybog-chat-popup-close {
  position: absolute;
  top: 22px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0e0e10;
  cursor: pointer;
  padding: 0;
}

.vybog-chat-popup-close:hover {
  background: #f3f3f5;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-close {
  color: #f7f7fb;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-close:hover {
  background: #24242d;
}

.vybog-chat-popup-logo {
  display: block;
  width: 36px;
  height: auto;
  margin: 0 auto 14px;
}

.vybog-chat-popup h2 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: #111111;
}

.vybog-chat-popup.dark-mode h2 {
  color: #f7f7fb;
}

.vybog-chat-popup-subtitle {
  width: min(330px, 100%);
  margin: 8px auto 18px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: #737381;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-subtitle {
  color: #a8a8b5;
}

.vybog-chat-popup-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 14px;
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-divider {
  color: #f0f0f4;
}

.vybog-chat-popup-divider::before,
.vybog-chat-popup-divider::after {
  content: "";
  height: 1px;
  background: #e7e7eb;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-divider::before,
.vybog-chat-popup.dark-mode .vybog-chat-popup-divider::after {
  background: #32323c;
}

.vybog-chat-popup-suggestions {
  display: grid;
  grid-gap: 9px;
  gap: 9px;
}

.vybog-chat-popup-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  border: 1px solid #e6e6ea;
  border-radius: 10px;
  background: #ffffff;
  padding: 7px 10px 7px 16px;
  color: #22222a;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.vybog-chat-popup-suggestion:hover {
  border-color: #c9c6ff;
  background: #fbfbff;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-suggestion {
  border-color: #333340;
  background: #1e1e27;
  color: #f0f0f5;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-suggestion:hover {
  border-color: #756cff;
  background: #262436;
}

.vybog-chat-popup-suggestion.selected {
  border-color: #5c51e8; 
  background: #e0e0ff; 
  color: #5c51e8;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-suggestion.selected {
  border-color: #8d84ff;
  background: #282449;
  color: #aaa4ff;
}

.vybog-chat-popup-suggestion span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vybog-chat-popup-suggestion svg {
  flex: 0 0 auto;
  color: #111111;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-suggestion svg {
  color: #f7f7fb;
}

.vybog-chat-popup-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid #b9adff;
  border-radius: 9px;
  background: #f0efff;
  padding: 9px 14px;
  color: #574cff;
  font-size: 13.5px;
  line-height: 1.35;
}

.vybog-chat-popup.dark-mode .vybog-chat-popup-tip {
  border-color: #756cff;
  background: #23213d;
  color: #aaa4ff;
}

.vybog-chat-popup-tip svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.vybog-chat-popup-got-it {
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  border: 0;
  border-radius: 8px;
  background: #655af2;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.vybog-chat-popup-got-it:hover {
  background: #5c51e8;
}

@media (max-width: 560px) {
  .vybog-chat-popup-overlay {
    padding: 10px;
  }

  .vybog-chat-popup {
    border-radius: 18px;
    max-height: calc(100dvh - 20px);
    padding: 20px 18px;
  }

  .vybog-chat-popup-close {
    top: 22px;
    right: 18px;
  }

  .vybog-chat-popup-divider {
    gap: 12px;
  }
}

@media (max-height: 620px) {
  .vybog-chat-popup-overlay {
    padding-block: 8px;
  }

  .vybog-chat-popup {
    max-height: calc(100dvh - 16px);
    padding-block: 18px;
    border-radius: 16px;
  }

  .vybog-chat-popup-logo {
    width: 30px;
    margin-bottom: 10px;
  }

  .vybog-chat-popup h2 {
    font-size: 19px;
  }

  .vybog-chat-popup-subtitle {
    margin: 6px auto 14px;
    line-height: 1.3;
  }

  .vybog-chat-popup-divider {
    margin-bottom: 12px;
  }

  .vybog-chat-popup-suggestions {
    gap: 8px;
  }

  .vybog-chat-popup-suggestion {
    min-height: 34px;
    padding-block: 6px;
  }

  .vybog-chat-popup-tip {
    margin-top: 12px;
    padding-block: 8px;
  }

  .vybog-chat-popup-got-it {
    min-height: 36px;
    margin-top: 12px;
  }
}

.overall-card-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-row-gap: 20px;
  row-gap: 20px;
  grid-column-gap: 20px;
  column-gap: 20px;
  border-radius: 5px;
  scrollbar-width: none;
  width: 100%;
  box-sizing: border-box;
}

.candidate-table-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.candidate-table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #6860ee;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  flex-shrink: 0;
}

.candidate-table-name {
  color: #6860ee;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-table-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.candidate-table-view-button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.candidate-table-view-button:hover {
  background-color: transparent;
}

.candidate-table-view-button img {
  width: 24px;
  display: block;
}

.no-results-outer-container {
  display: grid;
  grid-row-gap: 10px;
  row-gap: 10px;
  grid-column-gap: 20px;
  column-gap: 20px;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 16px;
  min-height: 300px;
  max-height: 500px;
}

.recommended-jobs-container {
  border-radius: 8px;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.recommended-jobs-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  animation: fadeIn 0.5s ease-in;
  margin-top: 0px;
}

.skeleton-grid,
.jobs-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   */
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}
.skeleton-grid,
.recommended-jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  width: 100%;
}

.job-card-wrapper {
  transition: transform 0.2s;
}

.job-card-wrapper:hover {
  transform: translateY(-4px);
}

@media (max-width: 1180px) {
  .skeleton-grid,
  .jobs-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991px) {
  .skeleton-grid,
  .recommended-jobs-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1440px) {
  .skeleton-grid{
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 16px;
    gap: 16px;
  }
}

/* .recommended-jobs-container.skeleton-grid{
  gap: 20px;
} */


/* @media (max-width: 768px) {
  .recommended-jobs-container {
    padding: 16px;
  }

  .skeleton-grid,
  .jobs-grid {
    grid-template-columns: 1fr 1fr;
  }
} */
.jobs-no-results-outer-container {
  display: grid;
  grid-row-gap: 10px;
  row-gap: 10px;
  grid-column-gap: 20px;
  column-gap: 20px;
  border: 1px solid #ccc;
  padding: 15px;
  margin: 15px;
  border-radius: 5px;
  min-height: 300px;
  max-height: 500px;
}

.no-results-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.outer-main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--body__background);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.outer-container {
  margin: 1px 20px 20px 20px;
  box-sizing: border-box;
}

.page-selector-container-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 64px;
  z-index: 8;
  background-color: var(--body__background);
  padding-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* .page-selector-container-wrapper.table-search-sticky {
  z-index: 20;
} */

.back-to-list-button {
  margin-left: auto;
  display: flex;
}

.back-to-list-button-from-resume {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.page-selector-container {
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 30px; */
  flex-direction: column;
  /* gap: 16px; */
}

.can-page-selector-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-direction: column;
}

.page-selector-dropdown {
  display: flex;
  justify-content: flex-start;
  /* padding-bottom: 10px; */
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  font-size: 14px;
}

.pagination li {
  display: inline-flex;
  margin: 0 2px;
}

.pagination li a {
  padding: 4px 8px;
  cursor: pointer;
  color: #666;
  border: none;
  background: none;
  text-decoration: none;
}

.pagination li.active a {
  color: #000;
  font-weight: 500;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.pagination li.previous a,
.pagination li.next a {
  color: #666;
  font-weight: normal;
}

.pagination li.disabled a {
  color: #ccc;
  cursor: not-allowed;
}

.pagination li.break a {
  color: #666;
}

.pagination::before {
  content: "Page";
  margin-right: 8px;
  color: #666;
}

.candidate-interview-header {
  gap: 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.job-tab-active {
  color: #6860ee;
  border-bottom: 4px solid #6860ee;
}

.candidate-header-main-container {
  display: flex;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9;
  padding: 2px 24px;
  border-bottom: 1px solid var(--border__color);
  height: 59px;
  /* width: 100%; */
  align-items: center;
  background-color: var(--body__background);
  color: var(--header__color);
}

.candidate-header-button-container {
  width: 100%;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.candidate-button-container {
  display: flex;
  gap: 10px;
}

.candidate-details-new {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: -20px;
}

.candidate-avatar-name {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.candidate-avatar-name .MuiAvatar-root {
  background-color: var(--avatar-icon-bg) !important;
  border: 1px solid var(--avatar-icon-border) !important;
}

.candidate-name-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.candidate-name-container .candidate-name {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
}

.candidate-email,
.candidate-mobile,
.candidate-url,
.candidate-phone {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}

.create-update-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 80px;
}

.client-create-update-details{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: 80px;
}

.company-dates {
  flex-direction: row;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}

.selection-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  /* opacity: 0; */
  transition: opacity 0.2s ease;
}

.candidate-card-outer-container:hover .selection-checkbox,
.candidate-card-outer-container.selected .selection-checkbox {
  opacity: 1;
}

.selection-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #6860ee;
  margin: 2px 3px 3px 3px;
}

.candidate-card-outer-container {
  position: relative;
  transition: all 0.2s ease;
}

.candidate-card-outer-container.selected {
  transform: scale(1.002);
  transition: transform 0.2s ease;
}

.selected .card {
  box-shadow: 0 4px 12px rgba(104, 96, 238, 0.2) !important;
  position: relative;
  border: 2px solid #6860ee;
}

.selection-actions {
  display: flex;
  align-items: center;
  /* margin-top: 20px;
  margin-bottom: 10px; */
  justify-content: flex-end;
  width: 100%;
  gap: 10px;
}

.selection-actions span {
  font-weight: 600;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background-color: var(--all-tracked-created-selected-bg);
  color: var(--all-tracked-created-selected-text);
  border: 1px solid var(--all-tracked-created-selected-text);
  box-sizing: border-box;
}

.filter-pill-value {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.candidate-fit-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.candidate-fit-pill-top-fit {
  color: #16a34a;
  background-color: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.45);
}

.candidate-fit-pill-good-fit {
  color: #2563eb;
  background-color: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.45);
}

.candidate-fit-pill-partial-fit {
  color: #d97706;
  background-color: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.candidate-fit-pill-unlikely-fit {
  color: #dc2626;
  background-color: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.candidate-fit-pill-n-a {
  color: var(--header__color);
  background-color: var(--body__background);
  border: 1px solid var(--border__color);
}

.cephea-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  width: 100%;
  background-color: var(--body__background);
}

.tab-content {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--border__color);
}

@media (max-width: 991px) {
  .candidate-details-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden;
  }
}
@media (max-width: 991px) {
  .tab-content {
    min-height: calc(100vh - 300px) !important;
    flex: 1 1 !important;
  }

  .company-dates {
    flex-direction: column;
  }
}

.candidate-header-button-container .create-button {
  background-color: #6860ee !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}

.candidate-header-button-container .create-button:hover {
  background-color: #5c47ce !important;
  transform: scale(1.05) !important;
}

.candidate-header-button-container button:hover {
  background-color: #5946c4 !important;
}

.candidate-header-button-container button {
  padding: 8px 14px !important;
}

.chat-messages-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0px 0px 20px 0px;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 10px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
  /* margin-bottom: 20px; */
  scrollbar-width: thin;
  scrollbar-color: #6860ee #f1f1f1;
}

.recommended-jobs-no-inner-scroll {
  max-height: none;
  overflow-y: visible;
}

.chat-with-cephea-messages-container {
   display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 70vh;
  overflow-y: auto;
  background-color: var(--body__background);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: #6860ee #f1f1f1;
}

.chat-messages-container::-webkit-scrollbar {
  width: 6px;
}

.chat-with-cephea-messages-container::-webkit-scrollbar {
  width: 6px;
}

.chat-messages-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.chat-with-cephea-messages-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
  background: #6860ee;
  border-radius: 10px;
}

.chat-with-cephea-messages-container::-webkit-scrollbar-thumb {
  background: #6860ee;
  border-radius: 10px;
}

.message-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: fadeIn 0.3s ease-out;
}

.message-wrapper.user {
  align-items: flex-end;
}

.user-message-container {
  max-width: 70%;
  margin-right: 10px;
  align-self: flex-end;
}

.user-message-content {
  background-color: #6860ee;
  color: white;
  padding: 1px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 18px;
  line-height: 1.4;
  word-break: break-word;
}

.bot-message-container {
  width: 100% !important;
  display: flex;
  align-items: flex-start;
  margin-left: 10px;
}

.cephea-chat-bot-message-container {
  width: 100% !important;
  display: flex;
  align-items: flex-start;
}

.bot-message-content {
  flex-grow: 1;
  width: 100% !important;
  background-color: var(--card__background);
  padding: 8px 10px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border__color);
  font-size: 0.95em;
  line-height: 1.4;
  word-break: break-word;
  box-sizing: border-box;
  display: flex;
  align-items: center;        
  justify-content: flex-start;
}

.replay-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #6860ee;
  padding: 5px;
}

.uploaded-files {
  margin-top: 8px;
  font-size: 0.85em;
  color: #d0d0d0;
  font-style: italic;
  margin-bottom: 8px;
}

.uploaded-files span {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 5px;
  margin-right: 5px;
}

.search-box-bottom {
  padding: 0px 20px;
  background-color: var(--body__background);
  /* border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); */
  position: -webkit-sticky;
  position: sticky;
  bottom: -43px;
  z-index: 10;
}

.search-results-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80vh;
}

.recommented-card-header {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--header__color);
}

.candidate-list {
  margin-top: -8px;
  margin-bottom: 20px;
}

.candidate-item {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.candidate-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.candidate-number {
  font-weight: bold;
  margin-right: 8px;
  color: #6860ee;
}

.candidate-name {
  font-weight: 600;
  color: var(--header__color);
}

.candidate-details p {
  margin: 5px 0;
  color: #555;
}

.candidate-details p strong {
  color: #333;
}

.summary-container {
  /* margin-top: 15px; */
  /* padding: 10px; */
  background-color: var(--card__background);
  /* border-radius: 8px; */
}

.summary-text {
  /* font-style: italic; */
  font-size: 18px;
  /* color: #666; */
  color: var(--chat-text);
}

.candidates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  margin-top: 20px;
}

.recommendation-results-header {
  gap: 16px;
  min-width: 0;
}

.recommendation-results-header > div:first-child {
  min-width: 0;
}

.recommendation-action-bar,
.recommend-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.recommendation-action-bar {
  flex: 0 0 auto;
  max-width: 100%;
}

.recommendation-action-bar .fit-calc-text {
  margin-left: 0 !important;
}

.recommendation-action-bar .recommend-action-button {
  min-height: 38px;
  white-space: nowrap;
  flex-shrink: 0;
}

.recommendation-action-bar .recommend-action-button span {
  white-space: nowrap;
}

/* The fit icon ships as #6860EE (same as the button fill), so it's invisible
   on the purple button. Force it white so it shows without needing a hover. */
.recommendation-action-bar .recommend-action-button img {
  filter: brightness(0) invert(1);
}

.recommend-selection-actions .recommend-selected-jobs-count {
  margin-left: 0;
}

.recommended-candidates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1550px) {
  .recommended-candidates-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .recommended-candidates-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
    row-gap: 20px;
    grid-column-gap: 14px;
    column-gap: 14px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.no-jobs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 25px;
}

h3.no-jobs-title {
  margin: 0;
}

.sticky-searching-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Responsive CSS */

@media (max-width: 1200px) {
  .candidate-interview-header {
    flex-direction: column;
    gap: 30px;
  }
}

@media (max-width: 1100px) {
  .overall-card-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .recommendation-results-header {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .recommendation-action-bar,
  .recommend-selection-actions {
    justify-content: flex-start;
  }

  .recommendation-action-bar .recommend-action-button {
    flex: 1 1 180px;
    min-width: 0;
  }

  .overall-card-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .overall-card-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .candidate-header-main-container {
    border-bottom: none;
    gap: 10px;
    margin: 15px;
  }

  .candidate-header-button-container {
    padding: 10px;
  }

  /* .chat-messages-container {
    padding: 15px;
    max-height: 60vh;
  } */

  .user-message-container,
  .bot-message-container,
  .cephea-chat-bot-message-container {
    max-width: 85%;
  }

  .search-box-bottom {
    padding: 10px 15px;
  }

  .recommented-card-header {
    font-size: 1.1em;
  }

  .candidates-grid {
    grid-template-columns: 1fr;
  }

  .candidate-avatar-name {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) and (max-height: 620px) {
  .candidate-header-main-container {
    border-bottom: none;
    padding: 30px 30px 1px 30px;
  }
}

@media (max-width: 576px) {
  .candidate-header-main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .candidate-header-button-container {
    padding: 10px 0px;
  }

  .candidate-header-button-container button {
    padding: 8px !important;
  }

  .chat-messages-container {
    padding: 10px;
  }

  .user-message-content,
  .bot-message-content {
    padding: 10px 15px;
    font-size: 0.9em;
  }

  .replay-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .skill-container {
    flex-direction: column !important;
  }
}

@media (max-width: 495px) {
  .candidate-header-button-container {
    margin: 10px 0;
    padding: 10px 0px;
  }
}

.message-and-cards-container{
  width: 100%;
}

@media (min-width: 2000px) {
  .skeleton-grid,
  .jobs-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 2500px) {
  .skeleton-grid,
  .recommended-jobs-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.tracking-maininnercontainer {
  display: flex;
  flex-direction: column;     
  /* justify-content: center;     */
  align-items: stretch;        
  margin-top: 2vh !important;              
}
/* .history-contentMain-Container{
  margin-top: -10vh !important;
} */
.loader-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh; 
}
.select-job-header {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

.message-wrapper.user {
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  animation: emerge 0.2s ease-out forwards;
}

@keyframes emerge {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.user-message-query-text{
  margin: 6px;
}

.grouped-candidates-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  width: -webkit-fill-available;
  scrollbar-width: none;
}

.candidate-group {
  margin-bottom: 20px;
}

.candidate-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  padding: 8px 16px;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.candidate-cards-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1110px) {
  .candidate-cards-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .candidate-cards-container {
    grid-template-columns: minmax(0, 1fr);
  }
}
:root {
  --side-popup-w: 44%;
}
@media (max-width: 610px) {
  :root {
    --side-popup-w: 70%;
  }
}
@media (max-width: 425px) {
  .candidate-header-main-container {
    padding: 10px;
    margin: 7px;
  }
}
@media (max-width: 382px) {
  .candidate-header-main-container {
    padding: 7px;
    margin: 4px;
  }
}
.client-details-new-outer.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--sidepopup-background);
    z-index: 1;
    padding: 20px 0px;
  }
@media (max-width: 991px) {
  .client-details-new-outer.sticky-header {
    position: static;
    top: auto;
    z-index: auto;
  }
}
@media (max-width: 923px) {
  .candidate-location-details {
   display: grid !important;
   grid-template-columns: 1fr !important;
   width: 100% !important;
  }
  .candidate-phone, .candidate-email, .candidate-url {
    width: 100%;
  }
}
.can-list-buttons {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.can-btn {
  background: transparent !important;
  color: var(--header__color) !important;
  /* border: 1px solid var(--header__color) !important; */
  padding: 6px 8px !important;
  border-radius: 100px !important;
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: none;
}
.track-can-btn {
  background: transparent !important;
  color: var(--header__color) !important;
  border: 1px solid var(--header__color) !important;
  padding: 6px 8px !important;
  border-radius: 100px !important;
  font-weight: 600;
  cursor: pointer;
  min-width: 145px;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: none;
}
.can-btn.active {
  background: transparent !important;
  color: var(--all-tracked-created-selected-text) !important;
  /* border-color: var(--all-tracked-created-selected-text) !important; */
  transform: translateY(-1px);
}
.track-can-btn.active {
  background: transparent !important;
  color: var(--all-tracked-created-selected-text) !important;
  border-color: var(--all-tracked-created-selected-text) !important;
  transform: translateY(-1px);
}
.can-btn:disabled,
.filter-stages-btn:disabled,
.grid-btn:disabled,
.track-can-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.select-button-container {
  display: flex;
  flex-direction: row; 
  align-items: center; 
  white-space: nowrap; 
  gap: 10px;
}
.match-select-button {
  padding: 5px 10px !important;
  height: 32px !important;
  font-size: 14px !important;
  display: flex;
  align-items: center;
}
.grid-btn {
  background: var(--body__background) !important;
  color: var(--header__color) !important;
  border: 1px solid var(--header__color) !important;
  padding: 7px 16px !important;
  border-radius: 100px !important;
  font-weight: 600;
  cursor: pointer;
  min-width: 100px;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: none;
}
.grid-btn.active {
  background: var(--all-tracked-created-selected-bg) !important; 
  color: var(--all-tracked-created-selected-text) !important;
  border-color: var(--all-tracked-created-selected-text) !important;
  transform: translateY(-1px);
}
/* .view-toggle-buttons {
  display: flex;
  background: var(--all-tracked-created-bg);
  border-radius: 100px;
  padding: 1px;
  align-items: center;
} */
.can-btn img,
.grid-btn img,
.filter-stages img,
.filter-stages-and-popup img,
.track-can-btn img {
  width: 17px;     
  height: 17px;
  object-fit: contain;
}
.filter-stages {
  display: flex;
  background: var(--body__background);
  border-radius: 100px;
  padding: 1px;
  align-items: center;
}
.filter-stages-and-popup {
  display: flex;
  background: var(--body__background);
  border-radius: 100px;
  align-items: center;
}
.filter-stages-btn {
  background: var(--body__background) !important;
  color: var(--header__color) !important;
  border: 1px solid var(--header__color) !important;
  padding: 6px !important;
  border-radius: 100px !important;
  font-weight: 600;
  cursor: pointer;
  min-width: 10px;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: none;
  margin-right: 5px;
}
.filter-stages {
  display: inline-flex;
  align-items: center;
  background-color: var(--grid-bg);
  padding: 4px 3px 2px 3px;
}
.filter-stages-and-popup {
    display: inline-flex;
  align-items: center;
  /* background-color: var(--grid-bg); */
}
.filter-stages .grid-btn:not(.filter-stages-btn) {
  background: transparent !important;
  color: var(--grid-na-text) !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.filter-stages .grid-btn.active:not(.filter-stages-btn) {
  background: var(--grid-a-bg) !important;
  color: var(--grid-a-text) !important;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.filter-stages .grid-btn.left:not(.filter-stages-btn) {
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
}
.filter-stages .grid-btn.right:not(.filter-stages-btn) {
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}
.move-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 2px solid var(--border__color);
  border-radius: 16px;
  background: var(--body__background);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}

.move-status-badge img {
  width: 22px;
  height: 22px;
}

.move-status-badge.moving {
  color: #6860ee;
}

.move-status-badge.moved {
  color: #08a63c;
}

.move-status-badge.notmoved {
  color: #d80000;
}

.move-status-info {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #777;
  border-radius: 50%;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  margin-left: 2px;
}

/* Custom tooltip content */
.move-status-tooltip {
  width: 275px;
  padding: 2px;
}

.move-status-tooltip-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
}

.move-status-tooltip-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
:root{--rpv-core__annotation--link-hover-background-color: rgba(255, 255, 0, 0.2);--rpv-core__annotation-popup-wrapper-background-color: #faf089;--rpv-core__annotation-popup-wrapper-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--rpv-core__annotation-popup-content-border-top-color: #1a202c;--rpv-core__arrow-border-color: rgba(0, 0, 0, 0.3);--rpv-core__asking-password-color: #000;--rpv-core__asking-password-wrapper-background-color: #fff;--rpv-core__asking-password-wrapper-border-color: rgba(0, 0, 0, 0.3);--rpv-core__button-background-color: rgba(0, 0, 0, 0.3);--rpv-core__button-color: #000;--rpv-core__doc-error-background-color: #fff;--rpv-core__doc-error-text-background-color: #c02424;--rpv-core__doc-error-text-color: #fff;--rpv-core__doc-loading-background-color: #fff;--rpv-core__full-screen-target-background-color: #fff;--rpv-core__inner-page-background-color: #fff;--rpv-core__menu-divider-border-bottom-color: rgba(0, 0, 0, 0.3);--rpv-core__menu-item-color: #000;--rpv-core__menu-item--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-core__menu-item--disabled-color: rgba(0, 0, 0, 0.3);--rpv-core__minimal-button-color: #000;--rpv-core__minimal-button--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-core__minimal-button--disabled-color: rgba(0, 0, 0, 0.3);--rpv-core__minimal-button--selected-background-color: rgba(0, 0, 0, 0.1);--rpv-core__modal-body-background-color: #fff;--rpv-core__modal-body-border-color: rgba(0, 0, 0, 0.3);--rpv-core__modal-overlay-background-color: rgba(0, 0, 0, 0.5);--rpv-core__page-layer-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);--rpv-core__popover-body-background-color: #fff;--rpv-core__popover-body-border-color: rgba(0, 0, 0, 0.3);--rpv-core__popover-body-color: #000;--rpv-core__primary-button-background-color: #2566e8;--rpv-core__primary-button-color: #fff;--rpv-core__progress-bar-background-color: rgba(0, 0, 0, 0.1);--rpv-core__progress-bar-progress-background-color: #2566e8;--rpv-core__progress-bar-progress-color: #fff;--rpv-core__separator-border-bottom-color: rgba(0, 0, 0, 0.3);--rpv-core__spinner-border-color: rgba(0, 0, 0, 0.4);--rpv-core__spinner-border-transparent-color: transparent;--rpv-core__splitter-background-color: transparent;--rpv-core__splitter--hover-background-color: rgba(0, 0, 0, 0.2);--rpv-core__text-layer-text--selection-background-color: rgb(0, 0, 255, 1);--rpv-core__text-layer-text--selection-color: transparent;--rpv-core__textbox-background-color: #fff;--rpv-core__textbox-border-color: rgba(0, 0, 0, 0.2);--rpv-core__textbox-color: #000;--rpv-core__tooltip-body-background-color: #000;--rpv-core__tooltip-body-color: #fff}.rpv-core__viewer--dark{--rpv-core__asking-password-background-color: #363636;--rpv-core__asking-password-color: #fff;--rpv-core__asking-password-wrapper-border-color: #191919;--rpv-core__asking-password-wrapper-background-color: #191919;--rpv-core__button-background-color: #171717;--rpv-core__button-color: #fff;--rpv-core__doc-error-background-color: #191919;--rpv-core__doc-error-text-background-color: #c02323;--rpv-core__doc-error-text-color: #fff;--rpv-core__doc-loading-background-color: #191919;--rpv-core__full-screen-target-background-color: #1a1a1a;--rpv-core__inner-page-background-color: #1a1a1a;--rpv-core__menu-divider-border-bottom-color: #000;--rpv-core__menu-item-color: #fff;--rpv-core__menu-item--hover-background-color: #2566e8;--rpv-core__menu-item--disabled-color: #5e5e5e;--rpv-core__minimal-button-color: #fff;--rpv-core__minimal-button--disabled-color: #5e5e5e;--rpv-core__minimal-button--hover-background-color: #191919;--rpv-core__minimal-button--selected-background-color: #1657bb;--rpv-core__modal-body-background-color: #363636;--rpv-core__primary-button-background-color: #2566e8;--rpv-core__popover-body-background-color: #363636;--rpv-core__popover-body-color: #fff;--rpv-core__progress-bar-background-color: #000;--rpv-core__separator-border-bottom-color: #000;--rpv-core__spinner-border-color: #fff;--rpv-core__splitter-background-color: #1a1a1a;--rpv-core__splitter--hover-background-color: #2566e8;--rpv-core__textbox-background-color: #121212;--rpv-core__textbox-border-color: #121212;--rpv-core__textbox-color: #fff;--rpv-core__tooltip-body-background-color: #414141;--rpv-core__tooltip-body-color: #fff}.rpv-core__annotation{position:absolute}.rpv-core__annotation-layer{z-index:1}.rpv-core__arrow{border-bottom:1px solid rgba(0, 0, 0, 0.3);border-bottom:1px solid var(--rpv-core__arrow-border-color);border-left-color:rgba(0, 0, 0, 0.3);border-left-color:var(--rpv-core__arrow-border-color);border-right:1px solid rgba(0, 0, 0, 0.3);border-right:1px solid var(--rpv-core__arrow-border-color);border-top-color:rgba(0, 0, 0, 0.3);border-top-color:var(--rpv-core__arrow-border-color);height:10px;position:absolute;width:10px;z-index:0}.rpv-core__arrow--tl{bottom:0;left:0;transform:translate(50%, 50%) rotate(45deg)}.rpv-core__arrow--tc{bottom:0;left:50%;transform:translate(-50%, 50%) rotate(45deg)}.rpv-core__arrow--tr{bottom:0;right:0;transform:translate(-50%, 50%) rotate(45deg)}.rpv-core__arrow--rt{left:0;top:0;transform:translate(-50%, 50%) rotate(135deg)}.rpv-core__arrow--rc{left:0;top:50%;transform:translate(-50%, -50%) rotate(135deg)}.rpv-core__arrow--rb{bottom:0;left:0;transform:translate(-50%, -50%) rotate(135deg)}.rpv-core__arrow--bl{left:0;top:0;transform:translate(50%, -50%) rotate(225deg)}.rpv-core__arrow--bc{left:50%;top:0;transform:translate(-50%, -50%) rotate(225deg)}.rpv-core__arrow--br{right:0;top:0;transform:translate(-50%, -50%) rotate(225deg)}.rpv-core__arrow--lt{right:0;top:0;transform:translate(50%, 50%) rotate(315deg)}.rpv-core__arrow--lc{right:0;top:50%;transform:translate(50%, -50%) rotate(315deg)}.rpv-core__arrow--lb{bottom:0;right:0;transform:translate(50%, -50%) rotate(315deg)}.rpv-core__asking-password{background-color:var(--rpv-core__asking-password-background-color);border-radius:.25rem;color:#000;color:var(--rpv-core__asking-password-color);padding:2rem}.rpv-core__asking-password--rtl{direction:rtl}.rpv-core__asking-password-wrapper{align-items:center;background-color:#fff;background-color:var(--rpv-core__asking-password-wrapper-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-core__asking-password-wrapper-border-color);display:flex;height:100%;justify-content:center;width:100%}.rpv-core__asking-password-message{margin:.5rem 0}.rpv-core__asking-password-body{align-items:center;display:flex;justify-content:center}.rpv-core__asking-password-input{width:15rem}.rpv-core__asking-password-input--ltr{margin-right:.5rem}.rpv-core__asking-password-input--rtl{margin-left:.5rem}.rpv-core__button{background-color:rgba(0, 0, 0, 0.3);background-color:var(--rpv-core__button-background-color);border:none;border-radius:.25rem;color:#000;color:var(--rpv-core__button-color);cursor:pointer;height:2rem;padding:0 1rem}.rpv-core__button--rtl{direction:rtl}.rpv-core__canvas-layer{direction:ltr;left:0;position:absolute;overflow:hidden;top:0}.rpv-core__doc-error{align-items:center;background-color:#fff;background-color:var(--rpv-core__doc-error-background-color);display:flex;justify-content:center;height:100%}.rpv-core__doc-error--rtl{direction:rtl}.rpv-core__doc-error-text{background-color:#c02424;background-color:var(--rpv-core__doc-error-text-background-color);border-radius:.25rem;color:#fff;color:var(--rpv-core__doc-error-text-color);line-height:1.5;max-width:50%;padding:.5rem}.rpv-core__doc-loading{background-color:#fff;background-color:var(--rpv-core__doc-loading-background-color);align-items:center;display:flex;justify-content:center;height:100%;width:100%;min-height:inherit}.rpv-core__doc-loading--rtl{direction:rtl}.rpv-core__icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;text-align:center}.rpv-core__icon--rtl{transform:scale(-1, 1)}.rpv-core__inner-container{min-height:inherit}.rpv-core__inner-pages{overflow:auto}.rpv-core__inner-pages--rtl{direction:rtl}.rpv-core__inner-pages--single{overflow:hidden}.rpv-core__inner-page-container--single{overflow:auto}.rpv-core__inner-page{background-color:#fff;background-color:var(--rpv-core__inner-page-background-color)}.rpv-core__inner-page--single{display:flex;align-items:center;justify-content:center}.rpv-core__inner-page--dual-even{display:flex;align-items:center;justify-content:flex-end}.rpv-core__inner-page--dual-odd{display:flex;align-items:center;justify-content:flex-start}.rpv-core__inner-page--dual-cover{display:flex;align-items:center;justify-content:center}.rpv-core__inner-page--dual-cover-odd{display:flex;align-items:center;justify-content:flex-end}.rpv-core__inner-page--dual-cover-even{display:flex;align-items:center;justify-content:flex-start}.rpv-core__annotation--link a{height:100%;left:0;position:absolute;top:0;width:100%}.rpv-core__annotation--link a:hover{background-color:rgba(255, 255, 0, 0.2);background-color:var(--rpv-core__annotation--link-hover-background-color)}.rpv-core__menu{display:flex;flex-direction:column}.rpv-core__menu--rtl{direction:rtl;text-align:right}.rpv-core__menu-divider{border-bottom:1px solid rgba(0, 0, 0, 0.3);border-bottom:1px solid var(--rpv-core__menu-divider-border-bottom-color);margin:.25rem 0}.rpv-core__menu-item{align-items:center;background-color:rgba(0,0,0,0);color:#000;color:var(--rpv-core__menu-item-color);border:none;cursor:pointer;display:flex;justify-content:center;padding:.25rem 0;width:100%}.rpv-core__menu-item:focus{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__menu-item--hover-background-color);outline:0}.rpv-core__menu-item:hover{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__menu-item--hover-background-color)}.rpv-core__menu-item-icon{align-items:center;display:flex}.rpv-core__menu-item-icon--ltr{padding-left:1rem;padding-right:.5rem}.rpv-core__menu-item-icon--rtl{padding-left:.5rem;padding-right:1rem}.rpv-core__menu-item-label{flex-grow:1;flex-shrink:1;white-space:nowrap}.rpv-core__menu-item-label--ltr{padding-right:2rem}.rpv-core__menu-item-label--rtl{padding-left:2rem}.rpv-core__menu-item-check--ltr{padding-right:1rem}.rpv-core__menu-item-check--rtl{padding-left:1rem}.rpv-core__menu-item--disabled{color:rgba(0, 0, 0, 0.3);color:var(--rpv-core__menu-item--disabled-color)}.rpv-core__menu-item--disabled:hover{background-color:rgba(0,0,0,0)}.rpv-core__menu-item--ltr{text-align:left}.rpv-core__menu-item--rtl{direction:rtl;text-align:right}.rpv-core__minimal-button{background-color:rgba(0,0,0,0);border:none;border-radius:.25rem;color:#000;color:var(--rpv-core__minimal-button-color);cursor:pointer;height:2rem;padding:0 .5rem}.rpv-core__minimal-button:hover{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__minimal-button--hover-background-color)}.rpv-core__minimal-button--disabled{color:rgba(0, 0, 0, 0.3);color:var(--rpv-core__minimal-button--disabled-color)}.rpv-core__minimal-button--rtl{direction:rtl}.rpv-core__minimal-button--selected{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__minimal-button--selected-background-color)}.rpv-core__modal-body{background-color:#fff;background-color:var(--rpv-core__modal-body-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-core__modal-body-border-color);border-radius:.25rem;margin:1rem;max-width:32rem;overflow:auto}.rpv-core__modal-body--rtl{direction:rtl}.rpv-core__modal-overlay{background-color:rgba(0, 0, 0, 0.5);background-color:var(--rpv-core__modal-overlay-background-color);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;align-items:center;display:flex;justify-content:center}.rpv-core__page-layer{align-items:center;display:flex;justify-content:center;overflow:visible;position:relative}.rpv-core__page-layer::after{content:"";position:absolute;bottom:.25rem;left:.25rem;right:.25rem;top:.25rem;box-shadow:2px 2px 8px 0 rgba(0, 0, 0, 0.2);box-shadow:var(--rpv-core__page-layer-box-shadow)}.rpv-core__page-layer--single{margin:0 auto}.rpv-core__page-size-calculator{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.rpv-core__popover-body{background-color:#fff;background-color:var(--rpv-core__popover-body-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-core__popover-body-border-color);border-radius:.25rem;color:#000;color:var(--rpv-core__popover-body-color);left:0;padding:.5rem 0;position:absolute;top:-9999px;z-index:9999}.rpv-core__popover-body-arrow{background-color:#fff;background-color:var(--rpv-core__popover-body-background-color)}.rpv-core__popover-body--rtl{direction:rtl}.rpv-core__popover-overlay{bottom:0;left:0;position:fixed;right:0;top:0}.rpv-core__annotation-popup-wrapper{background-color:#faf089;background-color:var(--rpv-core__annotation-popup-wrapper-background-color);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:var(--rpv-core__annotation-popup-wrapper-box-shadow);font-size:.75rem;padding:.25rem;word-break:break-word}.rpv-core__annotation-popup-wrapper--rtl{direction:rtl}.rpv-core__annotation-popup-title{font-weight:600;margin-bottom:.25rem}.rpv-core__annotation-popup-date{font-size:.5rem}.rpv-core__annotation-popup-content{border-top:1px solid #1a202c;border-top:1px solid var(--rpv-core__annotation-popup-content-border-top-color);padding:.25rem;max-height:16rem;overflow:auto}.rpv-core__primary-button{background-color:#2566e8;background-color:var(--rpv-core__primary-button-background-color);border:none;border-radius:.25rem;color:#fff;color:var(--rpv-core__primary-button-color);cursor:pointer;height:2rem;padding:0 1rem}.rpv-core__primary-button--rtl{direction:rtl}.rpv-core__progress-bar{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__progress-bar-background-color);border-radius:9999px;padding:.125rem}.rpv-core__progress-bar--rtl{direction:rtl}.rpv-core__progress-bar-progress{align-items:center;background-color:#2566e8;background-color:var(--rpv-core__progress-bar-progress-background-color);border-radius:9999px;color:#fff;color:var(--rpv-core__progress-bar-progress-color);display:flex;font-size:.75rem;justify-content:center;height:.75rem}.rpv-core__separator{border-bottom:1px solid rgba(0, 0, 0, 0.3);border-bottom:1px solid var(--rpv-core__separator-border-bottom-color)}.rpv-core__spinner{border-bottom:2px solid transparent;border-bottom:2px solid var(--rpv-core__spinner-border-transparent-color);border-left:2px solid transparent;border-left:2px solid var(--rpv-core__spinner-border-transparent-color);border-right:2px solid rgba(0, 0, 0, 0.4);border-right:2px solid var(--rpv-core__spinner-border-color);border-top:2px solid rgba(0, 0, 0, 0.4);border-top:2px solid var(--rpv-core__spinner-border-color);border-radius:9999px}.rpv-core__spinner--animating{animation-duration:.4s;animation-name:rpv-core__spinner-transform;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rpv-core__spinner-transform{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.rpv-core__splitter{background-color:transparent;background-color:var(--rpv-core__splitter-background-color);cursor:ew-resize;height:100%;width:.25rem}.rpv-core__splitter:hover,.rpv-core__splitter--resizing{cursor:col-resize;background-color:rgba(0, 0, 0, 0.2);background-color:var(--rpv-core__splitter--hover-background-color)}.rpv-core__splitter-body--resizing{cursor:col-resize}.rpv-core__splitter-sibling--resizing{pointer-events:none;-webkit-user-select:none;user-select:none}.rpv-core__textbox{background-color:#fff;background-color:var(--rpv-core__textbox-background-color);border:1px solid rgba(0, 0, 0, 0.2);border:1px solid var(--rpv-core__textbox-border-color);box-sizing:border-box;border-radius:.25rem;color:#000;color:var(--rpv-core__textbox-color);padding:0 .5rem;height:2rem;width:100%}.rpv-core__textbox--rtl{direction:rtl}.rpv-core__text-layer{left:0;position:absolute;top:0;height:100%;width:100%;opacity:.2;line-height:1;z-index:1}.rpv-core__text-layer span::selection{background-color:rgb(0, 0, 255, 1);background-color:var(--rpv-core__text-layer-text--selection-background-color);color:transparent;color:var(--rpv-core__text-layer-text--selection-color)}.rpv-core__text-layer br::selection{color:rgba(0,0,0,0)}.rpv-core__text-layer-text{color:rgba(0,0,0,0);cursor:text;position:absolute;transform-origin:0% 0%;white-space:pre}.rpv-core__tooltip-body{background-color:#000;background-color:var(--rpv-core__tooltip-body-background-color);border-radius:.25rem;color:#fff;color:var(--rpv-core__tooltip-body-color);left:0;max-width:20rem;position:absolute;text-align:center;top:-9999px;z-index:9999}.rpv-core__tooltip-body--rtl{direction:rtl}.rpv-core__tooltip-body-arrow{background-color:#000;background-color:var(--rpv-core__tooltip-body-background-color)}.rpv-core__tooltip-body-content{padding:.5rem}.rpv-core__display--block{display:block}.rpv-core__display--hidden{display:none}@media(min-width: 640px){.rpv-core__display--hidden-small{display:none}.rpv-core__display--block-small{display:block}}@media(min-width: 768px){.rpv-core__display--hidden-medium{display:none}.rpv-core__display--block-medium{display:block}}@media(min-width: 1024px){.rpv-core__display--hidden-large{display:none}.rpv-core__display--block-large{display:block}}.rpv-core__viewer{min-height:inherit}

:root{--rpv-attachment__item--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-attachment__item-color: #000}.rpv-core__viewer--dark{--rpv-attachment__item--hover-background-color: #2566e8;--rpv-attachment__item-color: #fff}.rpv-attachment__empty{height:100%;overflow:auto;padding:.5rem 0;text-align:center;width:100%}.rpv-attachment__empty--rtl{direction:rtl}.rpv-attachment__list{display:flex;height:100%;flex-direction:column;overflow:auto;padding:.5rem 0;width:100%}.rpv-attachment__list--rtl{direction:rtl}.rpv-attachment__item{align-items:center;background-color:rgba(0,0,0,0);border:none;color:#000;color:var(--rpv-attachment__item-color);cursor:pointer;display:flex;padding:.5rem;text-align:left;width:100%}.rpv-attachment__item:focus{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-attachment__item--hover-background-color);outline:0}.rpv-attachment__item:hover{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-attachment__item--hover-background-color)}.rpv-attachment__loader{align-items:center;display:flex;justify-content:center;height:100%;width:100%}:root{--rpv-bookmark__item--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-bookmark__item-color: #000}.rpv-core__viewer--dark{--rpv-bookmark__item--hover-background-color: #2566e8;--rpv-bookmark__item-color: #fff}.rpv-bookmark__item{align-items:center;color:#000;color:var(--rpv-bookmark__item-color);cursor:pointer;display:flex;padding-bottom:.25rem;padding-right:.25rem;padding-top:.25rem}.rpv-bookmark__item:focus{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-bookmark__item--hover-background-color);outline:0}.rpv-bookmark__item:hover{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-bookmark__item--hover-background-color)}.rpv-bookmark__toggle{align-items:center;display:flex;height:1rem;margin-right:.25rem;width:1rem}.rpv-bookmark__title{flex-grow:1;flex-shrink:1;text-decoration:none}.rpv-bookmark__list{list-style-type:none;overflow:auto;margin:0;padding:0}.rpv-bookmark__loader{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.rpv-bookmark__empty{height:100%;overflow:auto;padding:.5rem 0;text-align:center;width:100%}.rpv-bookmark__empty--rtl{direction:rtl}.rpv-bookmark__container{height:100%;overflow:auto;padding:.5rem 0;width:100%}.rpv-bookmark__container--rtl{direction:rtl}:root{--rpv-core__annotation--link-hover-background-color: rgba(255, 255, 0, 0.2);--rpv-core__annotation-popup-wrapper-background-color: #faf089;--rpv-core__annotation-popup-wrapper-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--rpv-core__annotation-popup-content-border-top-color: #1a202c;--rpv-core__arrow-border-color: rgba(0, 0, 0, 0.3);--rpv-core__asking-password-color: #000;--rpv-core__asking-password-wrapper-background-color: #fff;--rpv-core__asking-password-wrapper-border-color: rgba(0, 0, 0, 0.3);--rpv-core__button-background-color: rgba(0, 0, 0, 0.3);--rpv-core__button-color: #000;--rpv-core__doc-error-background-color: #fff;--rpv-core__doc-error-text-background-color: #c02424;--rpv-core__doc-error-text-color: #fff;--rpv-core__doc-loading-background-color: #fff;--rpv-core__full-screen-target-background-color: #fff;--rpv-core__inner-page-background-color: #fff;--rpv-core__menu-divider-border-bottom-color: rgba(0, 0, 0, 0.3);--rpv-core__menu-item-color: #000;--rpv-core__menu-item--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-core__menu-item--disabled-color: rgba(0, 0, 0, 0.3);--rpv-core__minimal-button-color: #000;--rpv-core__minimal-button--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-core__minimal-button--disabled-color: rgba(0, 0, 0, 0.3);--rpv-core__minimal-button--selected-background-color: rgba(0, 0, 0, 0.1);--rpv-core__modal-body-background-color: #fff;--rpv-core__modal-body-border-color: rgba(0, 0, 0, 0.3);--rpv-core__modal-overlay-background-color: rgba(0, 0, 0, 0.5);--rpv-core__page-layer-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);--rpv-core__popover-body-background-color: #fff;--rpv-core__popover-body-border-color: rgba(0, 0, 0, 0.3);--rpv-core__popover-body-color: #000;--rpv-core__primary-button-background-color: #2566e8;--rpv-core__primary-button-color: #fff;--rpv-core__progress-bar-background-color: rgba(0, 0, 0, 0.1);--rpv-core__progress-bar-progress-background-color: #2566e8;--rpv-core__progress-bar-progress-color: #fff;--rpv-core__separator-border-bottom-color: rgba(0, 0, 0, 0.3);--rpv-core__spinner-border-color: rgba(0, 0, 0, 0.4);--rpv-core__spinner-border-transparent-color: transparent;--rpv-core__splitter-background-color: transparent;--rpv-core__splitter--hover-background-color: rgba(0, 0, 0, 0.2);--rpv-core__text-layer-text--selection-background-color: rgb(0, 0, 255, 1);--rpv-core__text-layer-text--selection-color: transparent;--rpv-core__textbox-background-color: #fff;--rpv-core__textbox-border-color: rgba(0, 0, 0, 0.2);--rpv-core__textbox-color: #000;--rpv-core__tooltip-body-background-color: #000;--rpv-core__tooltip-body-color: #fff}.rpv-core__viewer--dark{--rpv-core__asking-password-background-color: #363636;--rpv-core__asking-password-color: #fff;--rpv-core__asking-password-wrapper-border-color: #191919;--rpv-core__asking-password-wrapper-background-color: #191919;--rpv-core__button-background-color: #171717;--rpv-core__button-color: #fff;--rpv-core__doc-error-background-color: #191919;--rpv-core__doc-error-text-background-color: #c02323;--rpv-core__doc-error-text-color: #fff;--rpv-core__doc-loading-background-color: #191919;--rpv-core__full-screen-target-background-color: #1a1a1a;--rpv-core__inner-page-background-color: #1a1a1a;--rpv-core__menu-divider-border-bottom-color: #000;--rpv-core__menu-item-color: #fff;--rpv-core__menu-item--hover-background-color: #2566e8;--rpv-core__menu-item--disabled-color: #5e5e5e;--rpv-core__minimal-button-color: #fff;--rpv-core__minimal-button--disabled-color: #5e5e5e;--rpv-core__minimal-button--hover-background-color: #191919;--rpv-core__minimal-button--selected-background-color: #1657bb;--rpv-core__modal-body-background-color: #363636;--rpv-core__primary-button-background-color: #2566e8;--rpv-core__popover-body-background-color: #363636;--rpv-core__popover-body-color: #fff;--rpv-core__progress-bar-background-color: #000;--rpv-core__separator-border-bottom-color: #000;--rpv-core__spinner-border-color: #fff;--rpv-core__splitter-background-color: #1a1a1a;--rpv-core__splitter--hover-background-color: #2566e8;--rpv-core__textbox-background-color: #121212;--rpv-core__textbox-border-color: #121212;--rpv-core__textbox-color: #fff;--rpv-core__tooltip-body-background-color: #414141;--rpv-core__tooltip-body-color: #fff}.rpv-core__annotation{position:absolute}.rpv-core__annotation-layer{z-index:1}.rpv-core__arrow{border-bottom:1px solid rgba(0, 0, 0, 0.3);border-bottom:1px solid var(--rpv-core__arrow-border-color);border-left-color:rgba(0, 0, 0, 0.3);border-left-color:var(--rpv-core__arrow-border-color);border-right:1px solid rgba(0, 0, 0, 0.3);border-right:1px solid var(--rpv-core__arrow-border-color);border-top-color:rgba(0, 0, 0, 0.3);border-top-color:var(--rpv-core__arrow-border-color);height:10px;position:absolute;width:10px;z-index:0}.rpv-core__arrow--tl{bottom:0;left:0;transform:translate(50%, 50%) rotate(45deg)}.rpv-core__arrow--tc{bottom:0;left:50%;transform:translate(-50%, 50%) rotate(45deg)}.rpv-core__arrow--tr{bottom:0;right:0;transform:translate(-50%, 50%) rotate(45deg)}.rpv-core__arrow--rt{left:0;top:0;transform:translate(-50%, 50%) rotate(135deg)}.rpv-core__arrow--rc{left:0;top:50%;transform:translate(-50%, -50%) rotate(135deg)}.rpv-core__arrow--rb{bottom:0;left:0;transform:translate(-50%, -50%) rotate(135deg)}.rpv-core__arrow--bl{left:0;top:0;transform:translate(50%, -50%) rotate(225deg)}.rpv-core__arrow--bc{left:50%;top:0;transform:translate(-50%, -50%) rotate(225deg)}.rpv-core__arrow--br{right:0;top:0;transform:translate(-50%, -50%) rotate(225deg)}.rpv-core__arrow--lt{right:0;top:0;transform:translate(50%, 50%) rotate(315deg)}.rpv-core__arrow--lc{right:0;top:50%;transform:translate(50%, -50%) rotate(315deg)}.rpv-core__arrow--lb{bottom:0;right:0;transform:translate(50%, -50%) rotate(315deg)}.rpv-core__asking-password{background-color:var(--rpv-core__asking-password-background-color);border-radius:.25rem;color:#000;color:var(--rpv-core__asking-password-color);padding:2rem}.rpv-core__asking-password--rtl{direction:rtl}.rpv-core__asking-password-wrapper{align-items:center;background-color:#fff;background-color:var(--rpv-core__asking-password-wrapper-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-core__asking-password-wrapper-border-color);display:flex;height:100%;justify-content:center;width:100%}.rpv-core__asking-password-message{margin:.5rem 0}.rpv-core__asking-password-body{align-items:center;display:flex;justify-content:center}.rpv-core__asking-password-input{width:15rem}.rpv-core__asking-password-input--ltr{margin-right:.5rem}.rpv-core__asking-password-input--rtl{margin-left:.5rem}.rpv-core__button{background-color:rgba(0, 0, 0, 0.3);background-color:var(--rpv-core__button-background-color);border:none;border-radius:.25rem;color:#000;color:var(--rpv-core__button-color);cursor:pointer;height:2rem;padding:0 1rem}.rpv-core__button--rtl{direction:rtl}.rpv-core__canvas-layer{direction:ltr;left:0;position:absolute;overflow:hidden;top:0}.rpv-core__doc-error{align-items:center;background-color:#fff;background-color:var(--rpv-core__doc-error-background-color);display:flex;justify-content:center;height:100%}.rpv-core__doc-error--rtl{direction:rtl}.rpv-core__doc-error-text{background-color:#c02424;background-color:var(--rpv-core__doc-error-text-background-color);border-radius:.25rem;color:#fff;color:var(--rpv-core__doc-error-text-color);line-height:1.5;max-width:50%;padding:.5rem}.rpv-core__doc-loading{background-color:#fff;background-color:var(--rpv-core__doc-loading-background-color);align-items:center;display:flex;justify-content:center;height:100%;width:100%;min-height:inherit}.rpv-core__doc-loading--rtl{direction:rtl}.rpv-core__icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;text-align:center}.rpv-core__icon--rtl{transform:scale(-1, 1)}.rpv-core__inner-container{min-height:inherit}.rpv-core__inner-pages{overflow:auto}.rpv-core__inner-pages--rtl{direction:rtl}.rpv-core__inner-pages--single{overflow:hidden}.rpv-core__inner-page-container--single{overflow:auto}.rpv-core__inner-page{background-color:#fff;background-color:var(--rpv-core__inner-page-background-color)}.rpv-core__inner-page--single{display:flex;align-items:center;justify-content:center}.rpv-core__inner-page--dual-even{display:flex;align-items:center;justify-content:flex-end}.rpv-core__inner-page--dual-odd{display:flex;align-items:center;justify-content:flex-start}.rpv-core__inner-page--dual-cover{display:flex;align-items:center;justify-content:center}.rpv-core__inner-page--dual-cover-odd{display:flex;align-items:center;justify-content:flex-end}.rpv-core__inner-page--dual-cover-even{display:flex;align-items:center;justify-content:flex-start}.rpv-core__annotation--link a{height:100%;left:0;position:absolute;top:0;width:100%}.rpv-core__annotation--link a:hover{background-color:rgba(255, 255, 0, 0.2);background-color:var(--rpv-core__annotation--link-hover-background-color)}.rpv-core__menu{display:flex;flex-direction:column}.rpv-core__menu--rtl{direction:rtl;text-align:right}.rpv-core__menu-divider{border-bottom:1px solid rgba(0, 0, 0, 0.3);border-bottom:1px solid var(--rpv-core__menu-divider-border-bottom-color);margin:.25rem 0}.rpv-core__menu-item{align-items:center;background-color:rgba(0,0,0,0);color:#000;color:var(--rpv-core__menu-item-color);border:none;cursor:pointer;display:flex;justify-content:center;padding:.25rem 0;width:100%}.rpv-core__menu-item:focus{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__menu-item--hover-background-color);outline:0}.rpv-core__menu-item:hover{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__menu-item--hover-background-color)}.rpv-core__menu-item-icon{align-items:center;display:flex}.rpv-core__menu-item-icon--ltr{padding-left:1rem;padding-right:.5rem}.rpv-core__menu-item-icon--rtl{padding-left:.5rem;padding-right:1rem}.rpv-core__menu-item-label{flex-grow:1;flex-shrink:1;white-space:nowrap}.rpv-core__menu-item-label--ltr{padding-right:2rem}.rpv-core__menu-item-label--rtl{padding-left:2rem}.rpv-core__menu-item-check--ltr{padding-right:1rem}.rpv-core__menu-item-check--rtl{padding-left:1rem}.rpv-core__menu-item--disabled{color:rgba(0, 0, 0, 0.3);color:var(--rpv-core__menu-item--disabled-color)}.rpv-core__menu-item--disabled:hover{background-color:rgba(0,0,0,0)}.rpv-core__menu-item--ltr{text-align:left}.rpv-core__menu-item--rtl{direction:rtl;text-align:right}.rpv-core__minimal-button{background-color:rgba(0,0,0,0);border:none;border-radius:.25rem;color:#000;color:var(--rpv-core__minimal-button-color);cursor:pointer;height:2rem;padding:0 .5rem}.rpv-core__minimal-button:hover{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__minimal-button--hover-background-color)}.rpv-core__minimal-button--disabled{color:rgba(0, 0, 0, 0.3);color:var(--rpv-core__minimal-button--disabled-color)}.rpv-core__minimal-button--rtl{direction:rtl}.rpv-core__minimal-button--selected{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__minimal-button--selected-background-color)}.rpv-core__modal-body{background-color:#fff;background-color:var(--rpv-core__modal-body-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-core__modal-body-border-color);border-radius:.25rem;margin:1rem;max-width:32rem;overflow:auto}.rpv-core__modal-body--rtl{direction:rtl}.rpv-core__modal-overlay{background-color:rgba(0, 0, 0, 0.5);background-color:var(--rpv-core__modal-overlay-background-color);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;align-items:center;display:flex;justify-content:center}.rpv-core__page-layer{align-items:center;display:flex;justify-content:center;overflow:visible;position:relative}.rpv-core__page-layer::after{content:"";position:absolute;bottom:.25rem;left:.25rem;right:.25rem;top:.25rem;box-shadow:2px 2px 8px 0 rgba(0, 0, 0, 0.2);box-shadow:var(--rpv-core__page-layer-box-shadow)}.rpv-core__page-layer--single{margin:0 auto}.rpv-core__page-size-calculator{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.rpv-core__popover-body{background-color:#fff;background-color:var(--rpv-core__popover-body-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-core__popover-body-border-color);border-radius:.25rem;color:#000;color:var(--rpv-core__popover-body-color);left:0;padding:.5rem 0;position:absolute;top:-9999px;z-index:9999}.rpv-core__popover-body-arrow{background-color:#fff;background-color:var(--rpv-core__popover-body-background-color)}.rpv-core__popover-body--rtl{direction:rtl}.rpv-core__popover-overlay{bottom:0;left:0;position:fixed;right:0;top:0}.rpv-core__annotation-popup-wrapper{background-color:#faf089;background-color:var(--rpv-core__annotation-popup-wrapper-background-color);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:var(--rpv-core__annotation-popup-wrapper-box-shadow);font-size:.75rem;padding:.25rem;word-break:break-word}.rpv-core__annotation-popup-wrapper--rtl{direction:rtl}.rpv-core__annotation-popup-title{font-weight:600;margin-bottom:.25rem}.rpv-core__annotation-popup-date{font-size:.5rem}.rpv-core__annotation-popup-content{border-top:1px solid #1a202c;border-top:1px solid var(--rpv-core__annotation-popup-content-border-top-color);padding:.25rem;max-height:16rem;overflow:auto}.rpv-core__primary-button{background-color:#2566e8;background-color:var(--rpv-core__primary-button-background-color);border:none;border-radius:.25rem;color:#fff;color:var(--rpv-core__primary-button-color);cursor:pointer;height:2rem;padding:0 1rem}.rpv-core__primary-button--rtl{direction:rtl}.rpv-core__progress-bar{background-color:rgba(0, 0, 0, 0.1);background-color:var(--rpv-core__progress-bar-background-color);border-radius:9999px;padding:.125rem}.rpv-core__progress-bar--rtl{direction:rtl}.rpv-core__progress-bar-progress{align-items:center;background-color:#2566e8;background-color:var(--rpv-core__progress-bar-progress-background-color);border-radius:9999px;color:#fff;color:var(--rpv-core__progress-bar-progress-color);display:flex;font-size:.75rem;justify-content:center;height:.75rem}.rpv-core__separator{border-bottom:1px solid rgba(0, 0, 0, 0.3);border-bottom:1px solid var(--rpv-core__separator-border-bottom-color)}.rpv-core__spinner{border-bottom:2px solid transparent;border-bottom:2px solid var(--rpv-core__spinner-border-transparent-color);border-left:2px solid transparent;border-left:2px solid var(--rpv-core__spinner-border-transparent-color);border-right:2px solid rgba(0, 0, 0, 0.4);border-right:2px solid var(--rpv-core__spinner-border-color);border-top:2px solid rgba(0, 0, 0, 0.4);border-top:2px solid var(--rpv-core__spinner-border-color);border-radius:9999px}.rpv-core__spinner--animating{animation-duration:.4s;animation-name:rpv-core__spinner-transform;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rpv-core__spinner-transform{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.rpv-core__splitter{background-color:transparent;background-color:var(--rpv-core__splitter-background-color);cursor:ew-resize;height:100%;width:.25rem}.rpv-core__splitter:hover,.rpv-core__splitter--resizing{cursor:col-resize;background-color:rgba(0, 0, 0, 0.2);background-color:var(--rpv-core__splitter--hover-background-color)}.rpv-core__splitter-body--resizing{cursor:col-resize}.rpv-core__splitter-sibling--resizing{pointer-events:none;-webkit-user-select:none;user-select:none}.rpv-core__textbox{background-color:#fff;background-color:var(--rpv-core__textbox-background-color);border:1px solid rgba(0, 0, 0, 0.2);border:1px solid var(--rpv-core__textbox-border-color);box-sizing:border-box;border-radius:.25rem;color:#000;color:var(--rpv-core__textbox-color);padding:0 .5rem;height:2rem;width:100%}.rpv-core__textbox--rtl{direction:rtl}.rpv-core__text-layer{left:0;position:absolute;top:0;height:100%;width:100%;opacity:.2;line-height:1;z-index:1}.rpv-core__text-layer span::selection{background-color:rgb(0, 0, 255, 1);background-color:var(--rpv-core__text-layer-text--selection-background-color);color:transparent;color:var(--rpv-core__text-layer-text--selection-color)}.rpv-core__text-layer br::selection{color:rgba(0,0,0,0)}.rpv-core__text-layer-text{color:rgba(0,0,0,0);cursor:text;position:absolute;transform-origin:0% 0%;white-space:pre}.rpv-core__tooltip-body{background-color:#000;background-color:var(--rpv-core__tooltip-body-background-color);border-radius:.25rem;color:#fff;color:var(--rpv-core__tooltip-body-color);left:0;max-width:20rem;position:absolute;text-align:center;top:-9999px;z-index:9999}.rpv-core__tooltip-body--rtl{direction:rtl}.rpv-core__tooltip-body-arrow{background-color:#000;background-color:var(--rpv-core__tooltip-body-background-color)}.rpv-core__tooltip-body-content{padding:.5rem}.rpv-core__display--block{display:block}.rpv-core__display--hidden{display:none}@media(min-width: 640px){.rpv-core__display--hidden-small{display:none}.rpv-core__display--block-small{display:block}}@media(min-width: 768px){.rpv-core__display--hidden-medium{display:none}.rpv-core__display--block-medium{display:block}}@media(min-width: 1024px){.rpv-core__display--hidden-large{display:none}.rpv-core__display--block-large{display:block}}.rpv-core__viewer{min-height:inherit}:root{--rpv-thumbnail__container-background-color: #fff;--rpv-thumbnail__container-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 8px 0px;--rpv-thumbnail__item--selected-background-color: rgba(0, 0, 0, 0.3)}.rpv-core__viewer--dark{--rpv-thumbnail__item--selected-background-color: #2566e8}.rpv-thumbnail__cover{align-items:center;display:flex;justify-content:center;height:100%;width:100%;min-height:inherit}.rpv-thumbnail__cover-inner{align-items:center;display:flex;justify-content:center;height:100%;width:100%;min-height:inherit}.rpv-thumbnail__cover-image{max-height:100%;max-width:100%}.rpv-thumbnail__cover-loader{align-items:center;display:flex;justify-content:center;height:100%;width:100%}.rpv-thumbnail__container{align-items:center;background:#fff;background:var(--rpv-thumbnail__container-background-color);box-shadow:rgba(0, 0, 0, 0.2) 2px 2px 8px 0px;box-shadow:var(--rpv-thumbnail__container-box-shadow);display:flex;justify-content:center;margin:0 auto;position:relative}.rpv-thumbnail__item{cursor:pointer}.rpv-thumbnail__item--single,.rpv-thumbnail__item--dual-cover{padding:.5rem}.rpv-thumbnail__item--dual-even,.rpv-thumbnail__item--dual-cover-odd{padding:.5rem 0 .5rem .5rem}.rpv-thumbnail__item--dual-odd,.rpv-thumbnail__item--dual-cover-even{padding:.5rem .5rem .5rem 0}.rpv-thumbnail__item--single:hover,.rpv-thumbnail__item--dual-cover:hover,.rpv-thumbnail__items--dual:hover .rpv-thumbnail__item,.rpv-thumbnail__items--dual-cover:hover .rpv-thumbnail__item{background-color:rgba(0, 0, 0, 0.3);background-color:var(--rpv-thumbnail__item--selected-background-color)}.rpv-thumbnail__item:focus{outline:0}.rpv-thumbnail__label{font-size:.75em;text-align:center;padding:.25rem}.rpv-thumbnail__list{overflow:auto;padding:.5rem}.rpv-thumbnail__list--rtl{direction:rtl}.rpv-thumbnail__list--horizontal{align-items:center;display:flex;flex-direction:row;width:100%}.rpv-thumbnail__list--vertical{height:100%}.rpv-thumbnail__items{align-items:center;display:flex;justify-content:center}.rpv-thumbnail__items--selected .rpv-thumbnail__item{background-color:rgba(0, 0, 0, 0.3);background-color:var(--rpv-thumbnail__item--selected-background-color)}.rpv-thumbnail__list-container{height:100%;width:100%}.rpv-thumbnail__loader{align-items:center;display:flex;height:100%;justify-content:center;width:100%}:root{--rpv-drop__area-background-color: #fff;--rpv-drop__area-body-border-color: rgba(0, 0, 0, 0.3);--rpv-drop__area-body-color: #000}.rpv-core__viewer--dark{--rpv-drop__area-background-color: #191919;--rpv-drop__area-body-border-color: #fff;--rpv-drop__area-body-color: #fff}.rpv-drop__area{background-color:#fff;background-color:var(--rpv-drop__area-background-color);bottom:0;left:0;position:absolute;right:0;top:0;padding:.5rem;z-index:9999}.rpv-drop__area-body{border:2px dashed rgba(0, 0, 0, 0.3);border:2px dashed var(--rpv-drop__area-body-border-color);color:#000;color:var(--rpv-drop__area-body-color);font-size:1.5rem;align-items:center;display:flex;justify-content:center;height:100%}.rpv-drop__area-body--rtl{direction:rtl}:root{--rpv-full-screen__overlay-background-color: #fff}.rpv-core__viewer--dark{--rpv-full-screen__overlay-background-color: #1a1a1a}.rpv-full-screen__exit-button{bottom:0;padding:.5rem;position:fixed;z-index:2}.rpv-full-screen__exit-button--ltr{right:0}.rpv-full-screen__exit-button--rtl{left:0}.rpv-full-screen__overlay{position:fixed;top:0;left:0;height:100%;width:100%;align-items:center;display:flex;justify-content:center;background-color:#fff;background-color:var(--rpv-full-screen__overlay-background-color);z-index:1}.rpv-open__input-wrapper{position:relative}.rpv-open__input{display:none;bottom:0;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.rpv-open__input::-webkit-file-upload-button{width:0}.rpv-page-navigation__current-page-input{margin:0 .25rem;text-align:right;width:3rem}:root{--rpv-print__progress-body-background-color: #fff;--rpv-print__progress-body-border-color: rgba(0, 0, 0, 0.3);--rpv-print__progress-body-color: #000}.rpv-core__viewer--dark{--rpv-print__progress-body-background-color: #363636;--rpv-print__progress-body-border-color: transparent;--rpv-print__progress-body-color: #fff}.rpv-print__permission-body{padding:1rem}.rpv-print__permission-footer{display:flex;justify-content:center;padding:0 1rem 1rem 0}.rpv-print__progress{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:9999}.rpv-print__progress-body{background-color:#fff;background-color:var(--rpv-print__progress-body-background-color);border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-print__progress-body-border-color);border-radius:.25rem;color:#000;color:var(--rpv-print__progress-body-color);padding:1.5rem;text-align:center;width:15rem}.rpv-print__progress-body--rtl{direction:rtl}.rpv-print__progress-bar{margin-bottom:1rem}.rpv-print__progress-message{margin-bottom:.5rem}.rpv-print__zone{display:none}@media print{@page{margin:0}.rpv-print__html-printing{height:100%}.rpv-print__body-printing{height:100%;margin:0}.rpv-print__body-printing *{display:none}.rpv-print__zone{display:block;height:100%}.rpv-print__page{align-items:center;display:flex;flex-direction:column;justify-content:center;height:100%;width:100%;page-break-after:always;page-break-inside:avoid}.rpv-print__page img{display:block;max-height:100%;max-width:100%}}.rpv-properties__loader{text-align:center}.rpv-properties__modal{min-height:20rem;padding:.5rem 0}.rpv-properties__modal-section{padding:0 .5rem}.rpv-properties__modal-footer{display:flex;justify-content:center;margin-top:.5rem}.rpv-properties__item{align-items:flex-start;display:flex;margin:.5rem 0}.rpv-properties__item--rtl{direction:rtl}.rpv-properties__item-label{padding-right:.5rem;width:25%}.rpv-properties__item-value{flex:1 1}.rpv-search__highlights{left:0;position:absolute;top:0;height:100%;width:100%}.rpv-search__highlight{background-color:rgba(255, 255, 0, 0.4);background-color:var(--rpv-search__highlight-background-color);border-radius:.25rem;position:absolute;z-index:1}.rpv-search__highlight--current{background-color:rgba(0, 128, 0, 0.4);background-color:var(--rpv-search__highlight--current-background-color)}.rpv-search__popover{padding:0 .5rem}.rpv-search__popover-input-counter{align-items:center;display:flex;margin-bottom:.5rem;position:relative;width:12rem}.rpv-search__popover-counter{align-items:center;bottom:0;display:flex;position:absolute;top:0}.rpv-search__popover-counter--ltr{padding-right:.25rem;right:0}.rpv-search__popover-counter--rtl{left:0;padding-left:.25rem}.rpv-search__popover-label{align-items:center;cursor:pointer;display:flex;margin-bottom:.5rem}.rpv-search__popover-label-checkbox{cursor:pointer;margin-right:.25rem}.rpv-search__popover-footer{align-items:center;display:flex}.rpv-search__popover-footer-item{padding:0 .25rem}.rpv-search__popover-footer-button--ltr{margin-left:auto}.rpv-search__popover-footer-button--rtl{margin-right:auto}:root{--rpv-search__highlight-background-color: rgba(255, 255, 0, 0.4);--rpv-search__highlight--current-background-color: rgba(0, 128, 0, 0.4)}.rpv-selection-mode__grab{cursor:grab}.rpv-selection-mode__grab :not(input),.rpv-selection-mode__grab :not(select),.rpv-selection-mode__grab :not(textarea){cursor:grab !important}.rpv-selection-mode__grabbing{cursor:grabbing}.rpv-selection-mode__grabbing :not(input),.rpv-selection-mode__grabbing :not(select),.rpv-selection-mode__grabbing :not(textarea){cursor:grabbing !important}:root{--rpv-zoom__popover-target-arrow-border-color: rgba(0, 0, 0, 0.6)}.rpv-core__viewer--dark{--rpv-zoom__popover-target-arrow-border-color: #fff}.rpv-zoom__popover-target{align-items:center;color:var(--rpv-zoom__popover-target-color);display:flex}.rpv-zoom__popover-target-scale--ltr{margin-right:.25rem}.rpv-zoom__popover-target-scale--rtl{margin-left:.25rem}.rpv-zoom__popover-target-arrow{border-color:rgba(0, 0, 0, 0.6) rgba(0,0,0,0) rgba(0,0,0,0);border-color:var(--rpv-zoom__popover-target-arrow-border-color) rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:.5rem .25rem 0;height:0;width:0}:root{--rpv-toolbar__label--color: #000}.rpv-core__viewer--dark{--rpv-toolbar__label--color: #fff}.rpv-toolbar{align-items:center;display:flex;width:100%}.rpv-toolbar--rtl{direction:rtl}.rpv-toolbar__left{align-items:center;display:flex}.rpv-toolbar__center{align-items:center;display:flex;flex-grow:1;flex-shrink:1;justify-content:center}.rpv-toolbar__right{align-items:center;display:flex;margin-left:auto}.rpv-toolbar__item{align-items:center;display:flex;padding:0 .125rem}.rpv-toolbar__label{color:#000;color:var(--rpv-toolbar__label--color)}:root{--rpv-default-layout__body-background-color: #fff;--rpv-default-layout__container-border-color: rgba(0, 0, 0, 0.3);--rpv-default-layout__toolbar-background-color: #eee;--rpv-default-layout__toolbar-border-bottom-color: rgba(0, 0, 0, 0.1);--rpv-default-layout__sidebar-border-color: rgba(0, 0, 0, 0.2);--rpv-default-layout__sidebar--opened-background-color: #fff;--rpv-default-layout__sidebar-headers-background-color: #eee;--rpv-default-layout__sidebar-content--opened-background-color: #fff;--rpv-default-layout__sidebar-content--opened-border-color: rgba(0, 0, 0, 0.2);--rpv-default-layout__sidebar-content--opened-color: #000}.rpv-core__viewer--dark{--rpv-default-layout__body-background-color: #1a1a1a;--rpv-default-layout__container-border-color: #454647;--rpv-default-layout__toolbar-background-color: #292929;--rpv-default-layout__toolbar-border-bottom-color: #000;--rpv-default-layout__sidebar-border-color: #000;--rpv-default-layout__sidebar--opened-background-color: #fff;--rpv-default-layout__sidebar-headers-background-color: #292929;--rpv-default-layout__sidebar-content--opened-background-color: #1a1a1a;--rpv-default-layout__sidebar-content--opened-border-color: #292929;--rpv-default-layout__sidebar-content--opened-color: #fff}.rpv-default-layout__container{border:1px solid rgba(0, 0, 0, 0.3);border:1px solid var(--rpv-default-layout__container-border-color);box-sizing:border-box;height:100%;width:100%}.rpv-default-layout__toolbar{align-items:center;background-color:#eee;background-color:var(--rpv-default-layout__toolbar-background-color);border-bottom:1px solid rgba(0, 0, 0, 0.1);border-bottom:1px solid var(--rpv-default-layout__toolbar-border-bottom-color);display:flex;left:0;position:absolute;top:0;height:2.5rem;width:100%;z-index:1}.rpv-default-layout__sidebar{display:flex;padding-top:2.5rem}.rpv-default-layout__sidebar--opened{bottom:0;left:0;position:absolute;top:0;width:12rem;background-color:#fff;background-color:var(--rpv-default-layout__sidebar--opened-background-color);z-index:1}.rpv-default-layout__sidebar--ltr{border-right:1px solid rgba(0, 0, 0, 0.2);border-right:1px solid var(--rpv-default-layout__sidebar-border-color)}.rpv-default-layout__sidebar--rtl{border-left:1px solid rgba(0, 0, 0, 0.2);border-left:1px solid var(--rpv-default-layout__sidebar-border-color)}.rpv-default-layout__main{display:flex;height:100%;position:relative}.rpv-default-layout__main--rtl{direction:rtl}.rpv-default-layout__body{background-color:#fff;background-color:var(--rpv-default-layout__body-background-color);flex:1 1;overflow:auto;padding-top:2.5rem}@media(min-width: 768px){.rpv-default-layout__sidebar--opened{width:16rem}}@media(min-width: 1024px){.rpv-default-layout__sidebar--opened{background:inherit;position:inherit;width:20rem;z-index:inherit}}.rpv-default-layout__sidebar-tabs{display:flex;height:100%;width:100%}.rpv-default-layout__sidebar-headers{background-color:#eee;background-color:var(--rpv-default-layout__sidebar-headers-background-color);padding:.25rem}.rpv-default-layout__sidebar-header{padding:.125rem}.rpv-default-layout__sidebar-content{display:none;flex-grow:1;flex-shrink:1}.rpv-default-layout__sidebar-content--opened{background-color:#fff;background-color:var(--rpv-default-layout__sidebar-content--opened-background-color);color:#000;color:var(--rpv-default-layout__sidebar-content--opened-color);display:flex;overflow:hidden}.rpv-default-layout__sidebar-content--ltr{border-left:1px solid rgba(0, 0, 0, 0.2);border-left:1px solid var(--rpv-default-layout__sidebar-content--opened-border-color)}.rpv-default-layout__sidebar-content--rtl{border-right:1px solid rgba(0, 0, 0, 0.2);border-right:1px solid var(--rpv-default-layout__sidebar-content--opened-border-color)}

.PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0}
.job-simple-search-container {
  padding: 15px;
  background-color: var(--body__background);
  border: 1px solid var(--global-search-container-border);
  border-radius: 16px;
}

.job-simple-search-container:has(.job-recommended-search-header.collapsed) {
  padding: 15px 15px 0 15px;
}

.job-recommended-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -15px -15px 0 -15px;
  padding: 8px 16px;
  background-color: var(--search-header-background-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-bottom: 15px;
}

.job-recommended-search-header.collapsed {
  margin-bottom: 0 !important;
}

.jelly-icon {
  width: 20px;
  height: 30px;
}

.job-recommended-search-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--search-title-color);
}

.job-recommended-search-subtext {
  font-size: 14px;
  color: var(--search-subtext-color);
  font-style: italic;
  margin-left: auto;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.toggle-icon {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.toggle-icon.collapsed {
  transform: rotate(180deg);
}

.job-rec-search-input-section-wrap {
  /* padding-bottom: 15px; */
  background-color: var(--body__background);
}

.job-rec-search-input-section {
  display: flex;
  /* align-items: center; */
  gap: 0;
  /* padding-top: 12px; */
  position: relative;
}

.job-search-input-with-advanced {
  width: 100%;
}

.job-advanced-filter-btn {
  transition: all 0.2s ease;
}

.job-advanced-filter-btn:hover {
  opacity: 0.8;
  transform: scale(0.98);
}

.job-advanced-search-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 10px;
  row-gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--search-input-section-border);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.job-advanced-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: -webkit-fill-available;
}
.job-advanced-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--header__color);
}
.job-advanced-field .form-input,
.job-advanced-field input {
  /* width: 100%; */
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.job-advanced-field input:focus {
  outline: none;
  border-color: #6860ee;
}

.job-advanced-field input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}
.job-advanced-field input[type="number"]::-webkit-inner-spin-button,
.job-advanced-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.job-advanced-field input[type="number"] {
  -webkit-appearance: textfield;
          appearance: textfield;
}
@media (max-width: 768px) {
  .job-advanced-search-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .job-rec-search-input-section {
    flex-direction: column;
    gap: 10px;
  }

  .job-rec-search-input-section > div:first-child {
    width: 100%;
  }

  .job-rec-search-input-section button {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .job-advanced-search-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .job-advanced-field {
  animation: fadeIn 0.3s ease;
} */
.job-advanced-field input:focus-visible,
.job-advanced-select:focus-visible {
  border-color: #6860ee;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

.job-simple-search-container .search-button-sharp-left.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.job-advanced-field:hover .job-advanced-label {
  color: #6860ee;
  transition: color 0.2s ease;
}

@charset "UTF-8";
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: normal;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  -webkit-clip-path: circle(0);
          clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.callback-reminder-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f0eeff45;
  border: 1px solid #ece9ff;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-family: "Satoshi", sans-serif;
}

.callback-reminder-container.dark {
  background: var(--body__background);
  border: 1px solid var(--border__color);
}

.callback-reminder-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.callback-reminder-icon-box {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e7e4ff;
  color: #6860ee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.callback-reminder-container.dark .callback-reminder-icon-box {
  background: rgba(104, 96, 238, 0.16);
}

.callback-reminder-text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.callback-reminder-title {
  color: #6860ee;
  font-size: 15px;
  font-weight: 700;
}

.callback-reminder-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #6b7280;
  font-size: 13px;
}

.callback-reminder-container.dark .callback-reminder-meta {
  color: var(--header__color);
  opacity: 0.75;
}

.callback-reminder-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.callback-reminder-dot {
  color: #b7b3d9;
}

@charset "UTF-8";
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
          appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  flex: 1 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: flex;
  flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  flex: 1 0;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: flex;
  flex-direction: row;
}

.rbc-month-row {
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1 0;
  flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  flex: 1 1;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: flex;
  flex-direction: row;
  flex: 1 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  flex: 1 0;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: flex;
  flex-direction: column;
  flex: 1 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  flex: 1 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: flex;
  flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  flex-flow: column wrap;
  align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  flex: 1 1;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  flex: 1 0;
  flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  flex: 1 1;
  flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  flex: 1 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  flex: 1 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

.rbc-time-content {
  display: flex;
  flex: 1 0;
  align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: flex;
  flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}


.custom-date-picker {
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--border__color);
  border-radius: 5px;
  width: 200px;
  text-align: center;
}
.custom-date-picker {
  border: none !important;
}
.candidate-details-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 15px;
}
.candidate-fields-container {
  margin-bottom: 15px;
}
.schedule-location-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
span.optional-container {
  font-size: 14px;
  font-weight: 200;
  margin-left: 4px;
}
.date-time-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
h3.schedule-header {
  margin-bottom: 0px;
  margin-top: 0px;
}
span.select-candidate {
  position: absolute;
  right: 0;
  /* top: 15px; */
  white-space: nowrap;
  cursor: pointer;
  color: #6860ee;
  font-weight: 600;
}
.candidate-name-container {
  position: relative;
}
.candidate-email-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}
.date-and-time-container {
  display: flex;
  gap: 10px;
}
span.delete-event-span {
  font-size: 16px;
  font-weight: 600;
}
.candidate-details-inner-container {
  border-bottom: 1px solid var(--border__color);
  margin-top: 15px;
}
.header-with-value {
  display: flex;
  align-items: center;
  gap: 40px;
}
p.or-span {
  text-align: center;
}
img.schedule-icon {
  width: 25px;
}
.schedule-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.schedule-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3vw;
  gap: 5px;
}
.interview-reschedule-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3vw;
  gap: 5px;
}
@media (max-width: 1110px) {
  .interview-reschedule-button-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}
.time-error-message {
  color: red;
  margin-top: 5px;
}
/* .toolbar {
  display: flex;
  align-items: center;
  gap: 15vw;
} */
.react-datepicker {
  border-radius: 8px;
}

.react-datepicker__header {
  background-color: #f8f9fa;
  border-bottom: 1px solid var(--border__color);
}

.react-datepicker__day--selected {
  background-color: #4caf50;
  color: white;
}

.react-datepicker__day:hover {
  background-color: #e8f5e9;
  cursor: pointer;
}

.rbc-event {
  background-color: #6860ee;
}

.rbc-day-bg {
  cursor: pointer;
}

.rbc-event {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
}

.rbc-event-content {
  flex: 1 1;
  overflow: hidden;
}

.rbc-time-slot {
  height: 21.5px !important;
}

.rbc-time-content {
  min-height: 21.5px !important;
}

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

.rbc-month-view {
  height: auto !important;
}

.rbc-month-row {
  min-height: 100px;
}

.rbc-month-header {
  height: 40px;
}

.rbc-month-view .rbc-event {
  white-space: normal !important;
  padding: 2px 4px !important;
  margin: 1px 0 !important;
  height: auto !important;
}

.month-event {
  display: flex;
  flex-direction: column;
}

.event-time {
  font-size: 10px;
  font-weight: bold;
}

.event-title {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rbc-date-cell {
  padding: 4px !important;
  text-align: center !important;
}

.rbc-off-range-bg {
  background: #f8f9fa;
}

.month-interview-event {
  background: rgba(104, 96, 238, 0.9);
  color: white;
  padding: 2px 4px;
  margin: 1px 0;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.month-event-time {
  font-weight: bold;
  margin-right: 4px;
  display: inline-block;
}
.calendar-header {
  gap: 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.interview-toogle-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .calendar-header {
    flex-direction: column;
    gap: 30px;
  }
}

.candidate-detail {
  margin-top: 15px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

img.candidate-detail-icon {
  width: 22px;
}

.icon-with-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icon-with-header h4 {
  max-width: 100px;
}

.candidate-detail p {
  margin: 0;
  font-size: 14px;
  color: var(--header__color);
  word-break: break-word;
  font-weight: 500;
  flex-grow: 1;
  min-width: 0;
  max-width: none;
}

.detail-value.link {
  display: block;
  /* margin-right: 100px; */
  word-break: break-word;
  color: #6860ee;
  /* display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
  max-width: 100%; */
}

.calendar-container {
  height: 80vh;
  margin: 0 auto;
  width: 90%;
  padding: 20px;
  background-color: var(--body__background);
  border-radius: 12px;
  overflow: hidden;
}

.calendar-header {
  gap: 10vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border__color);
}

.view-selector {
  display: flex;
  gap: 12px;
}

.view-selector button {
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--body__background);
  color: var(--header__color);
  cursor: pointer;
  border: 1px solid var(--border__color);
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.view-selector button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.view-selector button:active {
  transform: translateY(0);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.custom-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: relative;
  width: 100%;
}

.calender-toolbar-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--header__color);
}

.calendar-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-navigation button {
  border: 1px solid var(--border__color);
  border-radius: 8px;
  background: var(--navigation__bg);
  color: #6860ee;
  cursor: pointer;
  padding: 6px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.calendar-navigation button:hover {
  background: rgba(104, 96, 238, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.calendar-date-picker {
  border: 1px solid var(--border__color);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background-color: var(--body__background);
  color: var(--header__color);
  height: 30px;
  min-width: 140px;
  box-sizing: border-box;
}

.react-datepicker__input-container input {
  border: none;
  background: var(--body__background);
  color: var(--header__color);
}

.react-datepicker {
  border-radius: 10px;
  overflow: hidden;
  /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); */
  border: none;
}

.react-datepicker__header {
  background-color: var(--body__background);
  border-bottom: 1px solid var(--border__color);
  padding: 10px;
}

.react-datepicker__current-month {
  color: var(--header__color);
}

.react-datepicker-time__header {
  color: var(--header__color);
}

.react-datepicker__day {
  margin: 3px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: var(--header__color);
}

.react-datepicker__day-name {
  color: var(--header__color);
  width: 2.2rem;
}

.react-datepicker__day--selected {
  background-color: #6860ee;
  color: white !important;
  border-radius: 4px;
}

.react-datepicker__day:hover {
  background-color: rgba(121, 114, 242, 0.2) !important;
  cursor: pointer;
}

.timezone-selector {
  padding: 8px 12px;
  border: 1px solid var(--border__color);
  border-radius: 6px;
  font-size: 14px;
  margin-right: 15px;
  background-color: var(--body__background);
  color: var(--header__color);
}

.interview-event-container {
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6860ee 0%, #4238e0 100%);
  color: white;
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #2b21d3;
}

.interview-event-container:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.event-position {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.event-time {
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
}

.event-candidate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.9;
}

.event-icon {
  opacity: 0.8;
}

.month-interview-event {
  background: #6860ee;
  color: white;
  padding: 4px 6px;
  margin: 1px 0;
  border-radius: 4px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.month-interview-event:hover {
  background: #5448e7;
  transform: translateY(-1px);
}

.month-event-time {
  font-weight: bold;
  font-size: 10px;
  white-space: nowrap;
}

.month-event-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.candidate-details-popup {
  padding: 0;
  height: 100%;
  /* overflow-x: hidden; */
}

.candidate-details-outer-container {
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  padding: 0;
  height: 100%;
  /* overflow-x: hidden; */
}

.candidate-details-inner-container {
  background-color: var(--body__background);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 15px;
}

.schedule-header {
  font-size: 16px;
  font-weight: 600;
  color: #6860ee;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border__color);
}

.candidate-detail {
  margin-top: 15px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.icon-with-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}

.icon-with-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--header__color);
}

.candidate-detail-icon {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

.candidate-detail p {
  margin: 0;
  font-size: 14px;
  color: var(--header__color);
  word-break: break-word;
  font-weight: 500;
}

.date-and-time-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-and-time-container span {
  font-size: 14px;
  color: var(--header__color);
  font-weight: 500;
}

.detail-value.link {
  color: #6860ee;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  word-break: break-all;
}

.detail-value.link:hover {
  text-decoration: underline;
}

.schedule-detail {
  margin-bottom: 6px;
  margin-top: 16px;
}

.candidate-email-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 15px;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
}
/* .date-time-container {
  display: flex;
  align-items: center;
  gap: 8px;
} */

.interview-labels {
  font-size: 14px;
  font-weight: 500;
  color: var(--header__color);
}

.time-container {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: 8px;
}

.calendarschedulerIcons {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.time-and-error-container {
  display: flex;
  flex-direction: column;
}

.time-error-message {
  color: #ff5252;
  font-size: 12px;
  margin-top: -4px;
  margin-bottom: 8px;
}

.schedule-button-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: auto;
  padding: 15px 0;
}
@media (max-width: 1110px) {
  .schedule-button-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}
.rbc-month-view {
  border-radius: 10px;
  overflow-y: auto;
  border: 1px solid var(--border__color);
}

.rbc-month-header {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--border__color);
}

.rbc-header {
  padding: 10px;
  font-weight: 600;
  border-bottom: none;
}

.rbc-day-bg {
  transition: all 0.2s ease;
}

.rbc-day-bg:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.rbc-today {
  background-color: rgba(104, 96, 238, 0.05);
}

.rbc-off-range-bg {
  background-color: rgba(0, 0, 0, 0.02);
}

.rbc-month-row {
  min-height: 120px;
  overflow: visible;
}

.rbc-row-bg {
  right: 0;
}

.rbc-row-content {
  z-index: 1;
}

.rbc-date-cell {
  padding: 5px;
  text-align: center;
  font-weight: 500;
}

.rbc-date-cell.rbc-now {
  font-weight: bold;
  color: #6860ee;
}

.rbc-time-view {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border__color);
}

.rbc-time-view .rbc-allday-cell {
  height: 6%;
}

.rbc-time-header {
  background-color: rgba(0, 0, 0, 0.03);
  /* border-bottom: 1px solid var(--border__color); */
}

.rbc-time-header-content {
  border-left: 1px solid var(--border__color);
}

.rbc-time-content {
  border-top: 1px solid var(--border__color);
}

.rbc-timeslot-group {
  border-bottom: 1px solid var(--border__color);
}

.rbc-time-slot {
  border-top: none;
}

.rbc-time-gutter {
  background-color: rgba(0, 0, 0, 0.01);
}

.rbc-label {
  padding: 5px 8px;
  font-size: 12px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes slideIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

.react-calendar-container {
  background-color: var(--body__background);
  border-radius: 10px;
  overflow: hidden;
}

.calendar-date-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.calendar-date-wrapper:hover {
  background-color: rgba(104, 96, 238, 0.08);
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.view-selector button.active {
  background: #6860ee;
  color: white;
}

.view-selector button:hover {
  background: rgba(104, 96, 238, 0.1);
}

.view-selector button.active:hover {
  background: #5c53e6;
}

.rbc-time-header-cell {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rbc-day-slot .rbc-events-container {
  margin-right: 0;
}

.rbc-event {
  padding: 0;
  overflow: visible;
}

.interview-event-container:hover .event-indicator {
  background: rgba(255, 255, 255, 0.5);
  width: 60%;
}

.date-picker-modal .react-datepicker {
  font-family: inherit;
  /* width: 320px; */
}

.date-picker-modal .react-datepicker__month-container {
  width: 100%;
}

.date-picker-modal .react-datepicker__day {
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 2px;
  border-radius: 50%;
  color: var(--header__color);
}

.date-picker-modal .react-datepicker__day:hover {
  background-color: rgba(104, 96, 238, 0.1);
}

.date-picker-modal .react-datepicker__day--selected {
  background-color: #6860ee;
}

.month-nav-button:hover {
  background-color: rgba(104, 96, 238, 0.1) !important;
  border-radius: 4px;
}

.rbc-day-bg.rbc-today {
  position: relative;
}

.rbc-day-bg.rbc-today::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #6860ee;
  opacity: 0.6;
}

.rbc-time-slot:hover {
  background-color: rgba(104, 96, 238, 0.05);
}

/* Responsive */
@media (max-width: 991px) {
  .calendar-header {
    flex-direction: column;
    gap: 20px;
  }

  .calendar-container {
    width: 95%;
    padding: 15px;
  }

  .view-selector {
    width: 100%;
    justify-content: center;
  }

  .view-selector button {
    flex: 1 1;
    padding: 8px 10px;
    font-size: 14px;
  }

  .custom-toolbar {
    padding: 5px;
  }

  .toolbar {
    flex-direction: column;
    gap: 15px;
  }

  .candidate-details-inner-container {
    padding: 12px;
  }

  .candidate-email-container {
    grid-template-columns: 1fr;
  }

  /* .schedule-button-container {
    flex-direction: column;
  } */
}

@media (max-width: 768px) {
  .calendar-container {
    width: 100%;
    height: 75vh;
    padding: 10px;
    border-radius: 0;
  }

  .calendar-navigation {
    gap: 8px;
  }

  .calender-toolbar-label {
    font-size: 16px;
  }

  .view-selector button {
    padding: 8px 12px;
    font-size: 13px;
  }

  .candidate-details-popup {
    padding: 0;
  }

  .candidate-details-outer-container {
    padding: 10px;
    gap: 5px;
  }

  .toolbar {
    flex-direction: column;
    gap: 10px;
  }

  .calendar-date-wrapper {
    padding: 4px 8px;
  }

  .date-picker-modal {
    width: 90%;
    max-width: 350px;
  }

  .date-picker-modal .react-datepicker {
    width: 100%;
  }

  .date-picker-modal .react-datepicker__day {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
  }

  .event-position {
    font-size: 12px;
  }

  .event-time {
    font-size: 10px;
  }
}

.datepicker-modal-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--header__color);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    color 0.2s;
}
.datepicker-modal-btn:hover {
  background: rgba(104, 96, 238, 0.08);
  box-shadow: 0 2px 8px rgba(104, 96, 238, 0.08);
  color: #6860ee;
}
.datepicker-modal-btn.primary {
  background: #6860ee;
  color: white;
  font-weight: 500;
  box-shadow: 0 4px 8px rgba(104, 96, 238, 0.2);
  font-size: 16px;
  padding: 8px 15px;
}
.datepicker-modal-btn.primary:hover {
  background: #5c53e6;
  color: white;
}
.datepicker-modal-btn.cancel {
  background: #ccc;
  color: #222;
  font-size: 16px;
  padding: 8px 15px;
}
.datepicker-modal-btn.cancel:hover {
  background: #bdbdbd;
  color: #222;
}

.datepicker-modal-select {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 15px;
  background: var(--sidepopup-header-background);
  color: var(--header__color);
  font-weight: 500;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition:
    border 0.2s,
    box-shadow 0.2s;
  min-width: 90px;
  margin-right: 4px;
}
.datepicker-modal-select:focus,
.datepicker-modal-select:hover {
  border: 1.5px solid #6860ee;
  box-shadow: 0 2px 8px rgba(104, 96, 238, 0.08);
}

.date-picker-modal .calendar-day-cell {
  border-radius: 50%;
  transition:
    background 0.2s,
    color 0.2s,
    border 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 2px auto;
  cursor: pointer;
}
.date-picker-modal .calendar-day-cell.selected {
  background: #6860ee;
  color: white;
  border-radius: 50%;
  border: none;
}
.date-picker-modal .calendar-day-cell.today {
  border: 1.5px solid #6860ee;
}
.date-picker-modal .calendar-day-cell:hover {
  background: #6860ee;
  color: white;
  border-radius: 50%;
  border: none;
}

.meeting-link-scroll-container {
  max-height: 60px;
  overflow-y: auto;
  background: var(--body__background);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: -2px;
  margin-bottom: 6px;
  word-break: break-all;
}
.react-datepicker__day--disabled {
  color: var(--disabled_calender);
}
.optionmap-list .MuiTypography-root {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.no-calendar-interview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60vh;
  border-radius: 20px;
  text-align: center;
  margin-top: 60px !important;
}
.no-calendar-interview h3 {
  margin: 0;
}

.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,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)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap}
.delete-icon-container {
    display: flex;
    flex-direction: row-reverse;
  }
  .cert-add-container {
    margin-top: 16px;
    border: 1.5px solid var(--accordian-border);
    border-radius: 12px;
    overflow: hidden;
  }
  .cert-add-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--accordian-border);
    background: color-mix(in srgb, var(--text-color-accent) 8%, transparent);
  }
  
  .cert-add-header-icon {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color-accent);
    line-height: 1;
  }
  
  .cert-add-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color-accent);
    letter-spacing: 0.3px;
  }
  .cert-add-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    grid-gap: 12px;
    gap: 12px;
    padding: 14px;
    align-items: center;
  }
  .cert-add-career-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    gap: 12px;
    padding: 14px;
    align-items: center;
  }
  .cert-add-btn-wrapper {
    display: flex;
    align-items: flex-end;
    margin-top: 15px;
  }
  .cert-add-career-btn-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 14px;
    padding-bottom: 14px;
  }
.ai-driven-search-outercontainer {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  border-radius: 20px;
}
.recommend-ai-driven-search-outercontainer {
  margin: 0px 50px;
}

.candidate-driven-search-outercontainer {
  border: 1px solid #ccc;
}
.candidates-chat-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 10px;
  row-gap: 10px;
  grid-column-gap: 30px;
  column-gap: 30px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.ai-driven-search-container {
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
}
.ai-driven-expanded-search-container {
  padding: 10px;
  /* margin-top: 70px; */
  border: 1px solid #c4c2c2;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  width: 70%;
}
.ai-driven-expanded-search-outercontainer {
  display: flex;
  justify-content: center;
}
.ai-driven-expanded-container {
  display: flex;
  gap: 20px;
}
.ai-driven-header-expanded {
  width: 150px;
}
.ai-driven-header-expanded-container {
  display: flex;
  align-items: center;
}
.search-textfield {
  width: 100%;
  padding: 10px 10px 40px 10px;
  font-size: 15px;
  border: 1px solid #c4c2c2;
  border-radius: 5px;
  font-weight: 500;
  color: #0b0a0ad4;
}
.ai-search-textfield {
  width: 100%;
  padding: 10px 10px 10px 10px;
  font-size: 15px;
  border: 1px solid var(--border__color);
  border-radius: 5px;
  font-weight: 500;
  color: var(--header__color);
  background-color: var(--body__background);
}
.ai-expanded-search-textfield {
  width: 100%;
  padding: 10px 10px 10px 10px;
  font-size: 15px;
  border: 1px solid var(--border__color);
  border-radius: 5px;
  font-weight: 500;
  color: #0b0a0ad4;
}
.ai-driven-search-lowercontainer {
  display: flex;
  flex-direction: column;
  padding: 1px 13px 13px 13px;
  border: 1px solid var(--border__color);
  border-radius: 20px;
  width: 100%;
}
.dashboard-ai-driven-search-lowercontainer {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin: 20px;
  padding: 13px;
  border: 1px solid var(--border__color);
  border-radius: 20px;
}
.message-attach-button-container {
  display: flex;
  /* width: 100%; */
  gap: 20px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}
.message-attach-outer-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.attach-container-outer {
  display: flex;
  gap: 10px;
}
.message-attach-container {
  width: 100%;
  /* border: 1px solid #ddd; */
  padding: 5px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.dashboard-search-lowercontainer {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  padding: 10px;
  border: 1px solid #c4c2c2;
  border-radius: 5px;
  justify-content: space-between;
  border-radius: 8px;
}

.ai-driven-search-lowercontainer,
.dashboard-search-lowercontainer li {
  list-style-type: none;
}
.uploaded-files-items-list {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}
.create-uploaded-files-items-list {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0px;
}
.search-button-container {
  display: flex;
  justify-content: center;
  /* margin-top: 25px; */
  margin-bottom: 25px;
}
.uploaded-filename-container {
  display: flex;
  gap: 10px;
}
.uploaded-filenames {
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  padding: 5px 10px;
  position: relative;
  border: 1px solid #6860ee;
}
.delete-icon {
  position: absolute;
  right: 10px;
  cursor: pointer;
  top: 18px;
  z-index: 1;
}

.delete-icon svg {
  width: 20px;
  height: 20px;
}
.uploaded-file-size {
  font-size: 12px;
  color: #a7a4a4;
}
.attach-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 10px;
  border-radius: 42px;
}

.attach-label-text {
  font-size: 15px;
  color: #2064ed;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.attach-dashboard-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.attach-dashboard-label label,
img {
  /* cursor: pointer; */
}

.uploaded-filename-conatiner {
  display: flex;
}
.ai-close-icon {
  position: absolute;
  right: -8px;
  bottom: 33px;
  cursor: pointer;
  z-index: 99;
  background-color: var(--body__background);
  width: 20px !important;
  height: 20px !important;
}
.message-input-outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.recommend-message-input-outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ai-driven-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploaded-files-message-container {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  position: relative;
  top: 0px;
}
.ai-driven-header {
  margin: 0;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  position: relative;
  background: linear-gradient(to right, #7c3aed, #5031da);
  color: var(--body__background);
  border-radius: 20px 20px 0px 0px;
  align-items: center;
  gap: 12px;
}
.ai-driven-header-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  padding: 5px 5px 0px 5px;
  color: #ffffff;
}
.ai-driven-header-sub-title {
  font-size: 16px;
  padding: 2px 5px 5px 5px;
  margin: 0;
  font-weight: 400;
  color: #ffffff;
}
.ai-driven-header-icon {
  width: 44px;
  height: 44px;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 8px;
}
.chats-list-container {
  width: 20%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid #ddd;
  transition: width 0.3s ease-in-out;
  position: relative;
  z-index: 0;
}
h3.chat-history-header {
  padding-left: 25px;
}
@media (max-width: 890px) {
  h3.chat-history-header {
    font-size: 14px;
    padding-left: 25px;
  }
}
.channel-container {
  position: relative;
  padding: 10px;
  /* border: 1px solid var(--selected_chat_background); */
  border-radius: 8px;
  margin-left: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-mask-image: url(/static/media/chat-channel-mask-banner-dark.c48f06a353c91014335f.png);
          mask-image: url(/static/media/chat-channel-mask-banner-dark.c48f06a353c91014335f.png);
  -webkit-mask-size: cover;
          mask-size: cover;
}
.channel-container:hover {
  position: relative;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--chat_tab_hover);
  color: var(--header__color);
  margin-left: 5px;
  margin-bottom: 10px;
  -webkit-mask-image: none;
          mask-image: none;
}
h4.chat-group-title {
  margin-left: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border__color);
}
.selected-channel-container {
  position: relative;
  padding: 10px;
  border-radius: 8px;
  margin-left: 5px;
  margin-bottom: 10px;
  background-color: var(--selected_chat_background);
  color: var(--selected_chat_color);
  cursor: pointer;
}
p.chat-disclaimer {
  color: var(--job-Description_Color);
  font-size: 16px;
}
span.disclaimer-span {
  font-size: 16px;
  font-weight: 600;
}
.chat-tab-icon-container {
  display: flex;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  z-index: 9;
  top: 0;
  background-color: var(--body__background);
  flex-direction: column;
}
.chat-header-container {
  display: flex;
  align-items: center;
}
.chat-search-input {
  width: 90%;
  padding: 5px;
  margin-bottom: 3px;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-sizing: border-box;
  outline: none;
  margin-left: 15px;
  padding-left: 30px;
}
.new-chat-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  flex-direction: column;
  gap: 10px;
}
img.chat-tab-close-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  z-index: 99;
  left: -13px;
  top: 18px;
}
.chat-list-open-container {
  overflow-y: auto;
  overflow-x: hidden;
}
img.chat-tab-open-icon {
  width: 25px;
  height: 25px;
  margin: 10px;
}
img.thirple-dot-icon {
  width: 20px;
  /* margin-right: 13px; */
}
img.create-chat-icon {
  width: 25px;
  margin: 10px;
}
.messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding: 10px;
}
@media (max-width: 1331px) {
  .messages {
    padding: 30px;
  }
}
.recommend-messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  margin-top: 17vw;
}
.messages-conatiner {
  margin: 10px;
}
.candidates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  row-gap: 20px;
  grid-column-gap: 14px;
  column-gap: 14px;
}

@media (max-width: 1300px) {
  .candidates-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
    row-gap: 20px;
    grid-column-gap: 14px;
    column-gap: 14px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.channel-title {
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  display: flex;
  width: 85%;
  align-items: center;
  gap: 6px;
}
.loading-indicator {
  position: absolute;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: auto;
  height: auto;
  min-height: auto;
}
.user-message {
  display: flex;
  justify-content: flex-end;
  background-color: #6860ee;
  color: #fff;
  border-radius: 20px 20px 0 20px;
  text-align: right;
  padding: 0px 10px;
  margin: 5px 0;
  width: -webkit-fit-content;
  width: fit-content;
  float: right;
  margin-bottom: 15px;
}
/* .user-container {
  display: flex;
} */
.bot-message {
  align-self: flex-start;
  color: var(--header__color);
  text-align: left;
}
.bot-text-message {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  margin: 0;
  color: var(--header__color);
}
.message-input {
  display: flex;
  margin-top: 10px;
}

.message-input input {
  flex: 1 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
  background: var(--body__background);
}
.no-results-message {
  text-align: center;
  padding: 20px;
  color: var(--header_color);
  font-size: 14px;
}
.message-input button {
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

.message-input button:hover {
  background-color: #0056b3;
}

.text-with-card-container {
  width: 100%;
}

.ai-driven-container {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.inner-page-outer-container {
  /* display: flex;
  flex-direction: row; */
  height: calc(100vh - 60px);
  overflow: hidden;
  flex: 1 1;
  overflow-y: auto;
}

.chat-outer-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  height: calc(100% - 80px);
  /* padding: 0 30px; */
  overflow-y: auto;
  justify-content: flex-start;
}

.chat-container:has(> .ai-driven-search-outercontainer) {
  justify-content: center;
}

/* .messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  justify-content: flex-start;
  padding: 20px;
} */

.chats-list-container {
  width: 25%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid var(--border__color);
  transition: width 0.3s ease-in-out;
  position: relative;
  z-index: 0;
}

.chat-list-open-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
}

.message-input {
  position: relative;
  bottom: 0;
  background: var(--body__background);
  padding: 10px 20px;
  z-index: 98;
  display: flex;
  flex-shrink: 0;
}

.chat-tab-icon-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9;
  background-color: var(--body__background);
  flex-direction: column;
}

/* Center chat content when there are few messages */
.messages-conatiner {
  margin: 8px 0;
  width: 100%;
}

/* Ensure messages grow from top (not bottom up) */
.messages:empty {
  justify-content: flex-start;
}

.chat-list-close-container {
  background-color: transparent;
  width: 50px !important;
}

.chats-list-container:not(.chat-list-open-container) {
  width: 25%;
}

@media (max-width: 1400px) {
  .chats-list-container:not(.chat-list-open-container) {
    width: 20%;
  }
}

@media (max-width: 890px) {
  .chats-list-container:not(.chat-list-open-container) {
    width: 22%;
  }
}

.attach-container {
  padding: 10px;
  border-radius: 20px;
  /* border: 1px solid #ccc; */
  font-size: 15px;
  font-weight: 500;
}

.recommend-message-input {
  position: fixed;
  background: var(--body__background);
  z-index: 98;
  display: flex;
  align-items: center;
}
.message-input .textfield-container {
  flex: 1 1;
  margin-bottom: 0px;
}
.recommend-message-input .textfield-container {
  flex: 1 1;
  margin-bottom: 0px;
}
.message-input img.send-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 15px;
}
.recommend-message-input img.send-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 15px;
}
.ai-driven-search-outercontainer .img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.dashboard-ai-driven-search-outercontainer .img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.resize-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  right: -60px;
  bottom: 10px;
}
.bot-replay-icon{
  width: 32px;
  height: 32px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #6860ee;
  padding: 5px;
}
img.bot-replay-icon {
  width: auto;
  height: 30px;
}
.education-container {
  margin-left: 11px;
}
.bot-response-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 15px;
  overflow-x: hidden;
  width: 100%;
}
.aidriven-bot-response-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 15px;
  overflow-x: hidden;
  width: 100%;
  max-width: 90%; 
}
.bot-response {
  border: 1px solid var(--border__color);
  background-color: var(--card__background);
  padding: 12px 16px;
  border-radius: 20px;
  width: 100%;
}
.user-message img.bot-replay-icon {
  display: none;
}
.reply-message {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.user-text-message {
  margin: 0;
  /* padding: 10px; */
  max-width: 500px;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  /* padding: 16px; */
  box-sizing: border-box;
  text-align: left;
}
.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 20px;
  row-gap: 20px;
}

@media (max-width: 991px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .ai-driven-search-outercontainer {
    margin: 0 8%;
  }
}

@media (max-width: 950px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

/* .header-main-container {
  display: flex;
  align-items: center;
  padding: 5px 30px;
  border-bottom: 1px solid var(--border__color);
  height: 60px;
} */
h3.header-channel-title {
  width: 100%;
}
.back-to-conversation {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* width: 100%; */
}
.chats-list-container.chat-list-close-container {
  width: 50px !important;
  background-color: transparent;
}

.message-input {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: var(--body__background);
  padding: 10px 30px;
  z-index: 98;
  display: flex;
}

.messages-conatiner:last-child {
  margin-bottom: 20px;
}

.inner-page-outer-container>.chat-outer-container {
  height: 100%;
  overflow-y: auto;
}

.inner-page-outer-container {
  min-height: calc(100vh - 60px);
}

h3.recommented-card-header {
  margin-bottom: 0;
  margin-top: 0;
  margin: 10px;
}
/* .candidate-list {
  margin-bottom: 20px;
} */
.candidate-item {
  /* background-color: var(--client_card_background); */
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.candidate-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.candidate-number {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
  color: var(--header__color);
}
.candidate-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
}
.candidate-details p {
  margin: 5px 0;
  font-size: 14px;
  color: var(--text__color);
}
.candidate-details p strong {
  color: var(--header__color);
}

.summary-text {
  font-size: 18px;
  /* font-style: italic; */
  color: var(--chat-text);
  margin-bottom: 16px;
  margin-top: 4px;
}

.chat-channel-delete-popup {
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .header-main-container {
    border-bottom: none;
    padding: 15px 30px;
  }
}

@media screen and (max-width: 768px) and (max-height: 620px) {
  .header-main-container {
    border-bottom: none;
    padding: 30px 30px 1px 30px;
  }
}

@media (max-width: 1331px) {
  body.chat-list-closed .recommended-jobs-container,
  .ai-driven-container.chat-list-closed .recommended-jobs-container {
    padding: 16px;
  }
  body.chat-list-closed .skeleton-grid,
  body.chat-list-closed .jobs-grid,
  .ai-driven-container.chat-list-closed .skeleton-grid,
  .ai-driven-container.chat-list-closed .jobs-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1148px) {
  body.chat-list-closed .recommended-jobs-container,
  .ai-driven-container.chat-list-closed .recommended-jobs-container {
    padding: 16px;
  }
  body.chat-list-closed .skeleton-grid,
  body.chat-list-closed .jobs-grid,
  .ai-driven-container.chat-list-closed .skeleton-grid,
  .ai-driven-container.chat-list-closed .jobs-grid {
    grid-template-columns: 1fr;
  }
  body.chat-list-closed .messages,
  .ai-driven-container.chat-list-closed .messages {
    padding: 30px;
  }
}
.skeleton-grid,
.ai-driven-jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}
.jobs-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 20ch;
}

@media (max-width: 1435px) {
  .ai-driven-jobs-container {
    padding: 16px;
  }

  .skeleton-grid,
  .ai-driven-jobs-grid {
    grid-template-columns: 1fr;
  }
  .jobs-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 35ch;
  }
}

/* @media (min-width: 2225px) {

  .skeleton-grid,
  .ai-driven-jobs-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .jobs-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
  }
} */
@media (min-width: 2225px) {
  body.sidebar-closed.chat-list-closed .ai-driven-jobs-grid,
  body.sidebar-closed.chat-list-closed .skeleton-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .jobs-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
  }
}

.ai-driven-jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

@media (max-width: 1435px) {
  .ai-driven-jobs-grid {
    grid-template-columns: 1fr;
  }
}

body.sidebar-closed .ai-driven-jobs-grid,
body.chat-list-closed .ai-driven-jobs-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1280px) {
  body.sidebar-closed .ai-driven-jobs-grid,
  body.chat-list-closed .ai-driven-jobs-grid {
    grid-template-columns: 1fr;
  }
}

body.sidebar-closed.chat-list-closed .ai-driven-jobs-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1048px) {
  body.sidebar-closed.chat-list-closed .ai-driven-jobs-grid {
    grid-template-columns: 1fr;
  }
}
.channel-title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: 100%;
}
@media (max-width: 1900px) {
  .channel-title-text {
    -webkit-line-clamp: 2;
  }
}

.back-to-conversation button {
  white-space: nowrap;
}

.header-channel-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.message-wrapper.user {
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  animation: emerge 0.2s ease-out forwards;
}
.message-wrapper.bot {
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  animation: emerge 0.2s ease-out forwards;
}
@keyframes emerge {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.messages-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  /* max-height: 70vh; */
  /* overflow-y: auto; */
  background-color: var(--body__background);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: #6860ee #f1f1f1;
}

.messages-container::-webkit-scrollbar {
  width: 8px;
}

.messages-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.messages-container::-webkit-scrollbar-thumb {
  background: #6860ee;
  border-radius: 10px;
}

@media (max-width: 480px) {
  .messages-container {
    padding: 10px;
  }
}

.new-chat-btn:disabled,
.new-chat-btn[disabled] {
  cursor: not-allowed !important;
}

.top-jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  border: 1px solid var(--border__color);
  border-radius: 5px;
  padding: 15px;
}

@media (max-width: 2440px) {
  .top-jobs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
    border: 1px solid var(--border__color);
    border-radius: 5px;
    padding: 15px;
  }
}

@media (max-width: 1340px) {
  .top-jobs-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
    border: 1px solid var(--border__color);
    border-radius: 5px;
    padding: 15px;
  }
}

.top-candidates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  border: 1px solid var(--border__color);
  border-radius: 30px;
  padding: 15px;
}
.fit-calc-text {
  color: #6860EE;
cursor: pointer;
font-size: 14px;
font-weight: 600;
margin-left: 20%;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}

.recommend-selected-jobs-count {
  margin-right: 10px;
font-weight: 600;
color: #6860EE;
border: 1px solid #6860EE;
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
white-space: nowrap;
margin-left: 10px;
}
:root {
  --transition: 0.25s;
  --spark: 1.8s;
}

.sparkle-button {
	--active: 0;
	/* background: hsl(
		260
		calc(var(--active) * 97%)
		6%
	); */
	display: grid;
	place-items: center;
	transition: background 0.25s;
	transition: background var(--transition);
	position: relative;
    overflow: visible;
}

.sparkle-button button {
	--cut: 0.1em;
	--active: 0;
	--bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
			transparent
		),
		hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
	background: var(--bg);
	font-size: 16px;
	font-weight: 500;
	border: 0;
	cursor: pointer;
	padding: 0.9em 1.3em;
	display: flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
	border-radius: 100px;
	position: relative;
	/* box-shadow:
		0 0 calc(var(--active) * 2em) calc(var(--active) * 0.3em) hsl(260 97% 61% / 0.75),
		0 0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
		0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset; */
	transition: box-shadow 0.25s, scale 0.25s, background 0.25s;
	transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
	/* scale: calc(1 + (var(--active) * 0.1)); */
  z-index: 1;
}

.sparkle-button button:active {
  scale: 1;
}

.sparkle-button svg {
	overflow: visible !important;
}

.sparkle-button .sparkle path {
	color: hsl(0 0% calc((0 * 70%) + var(--base)));
	color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
	transform-box: fill-box;
	transform-origin: center;
	fill: currentColor;
	stroke: currentColor;
	animation-delay: calc((0.25s * 1.5) + (var(--delay) * 1s));
	animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
	animation-duration: 0.6s;
	transition: color 0.25s;
	transition: color var(--transition);
}

.sparkle-button button path {
	animation-name: bounce;
}

@keyframes bounce {
	35%, 65% {
		scale: var(--scale);
	}
}
.sparkle-button .sparkle path:nth-of-type(1) {
	--scale: 0.5;
	--delay: 0.1;
	--base: 40%;
}

.sparkle-button .sparkle path:nth-of-type(2) {
	--scale: 1.5;
	--delay: 0.2;
	--base: 20%;
}

.sparkle-button .sparkle path:nth-of-type(3) {
	--scale: 2.5;
	--delay: 0.35;
	--base: 30%;
}

.sparkle-button button:before {
	content: "";
	position: absolute;
	inset: -0.25em;
	z-index: -1;
	border: 0.25em solid hsl(260 97% 50% / 0.5);
	border-radius: 100px;
	opacity: 0;
	opacity: var(--active, 0);
	transition: opacity 0.25s;
	transition: opacity var(--transition);
}

.sparkle-button .spark {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	rotate: 0deg;
	overflow: hidden;
	-webkit-mask: linear-gradient(white, transparent 50%);
	        mask: linear-gradient(white, transparent 50%);
	animation: flip calc(1.8s * 2) infinite steps(2, end);
	animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
	to {
		rotate: 360deg;
	}
}
.spark-button{
	display: flex;
	gap: 10px;
}
.spark-search-icon {
  width: 16px;
  height: 16px;
}
.sparkle-button .spark:before {
	content: "";
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 0%;
	left: 50%;
	z-index: -1;
	translate: -50% -15%;
	rotate: 0;
	transform: rotate(-90deg);
	opacity: calc((var(--active)) + 0.4);
	background: conic-gradient(
		from 0deg,
		transparent 0 340deg,
		white 360deg
	);
	transition: opacity 0.25s;
	transition: opacity var(--transition);
	animation: rotate 1.8s linear infinite both;
	animation: rotate var(--spark) linear infinite both;
}

.sparkle-button .spark:after {
	content: "";
	position: absolute;
	inset: var(--cut);
	border-radius: 100px;
}

.sparkle-button .backdrop {
	position: absolute;
	inset: var(--cut);
	background: var(--bg);
	border-radius: 100px;
	transition: background 0.25s;
	transition: background var(--transition);
}

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

@supports(selector(:has(:is(+ *)))) {
	.sparkle-button:has(button:is(:hover, :focus-visible)) {
		--active: 1;
		--play-state: running;
	}
	.sparkle-button .bodydrop {
		display: none;
	}
}

.sparkle-button button ~ :is(.bodydrop, .particle-pen) {
	--active: 1;
	--play-state: running;
}

/* .sparkle-button .bodydrop {
	background: hsl(
		260
		calc(var(--active) * 97%)
		6%
	);
	position: fixed;
	inset: 0;
	z-index: -1
} */

.sparkle-button button {
	--active: 1;
	--play-state: running;
}



/* .sparkle-button .particle-pen {
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	mask: radial-gradient(white, transparent 65%);
  -webkit-mask: radial-gradient(white, transparent 65%);
	z-index: 0;
	opacity: 1;
	transition: opacity var(--transition);
} */

.sparkle-button .particle {
	fill: white;
	width: calc(0.25 * 1rem);
	width: calc(var(--size, 0.25) * 1rem);
	aspect-ratio: 1;
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	opacity: 1;
	opacity: var(--alpha, 1);
	animation: float-out calc(1 * 1s) calc(var(--delay) * -1s) infinite linear;
	animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
	transform-origin: 1000% 1000%;
	transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
	z-index: -1;
	animation-play-state: running;
	animation-play-state: var(--play-state, running);
}

.sparkle-button .particle path {
	fill: hsl(0 0% 90%);
	stroke: none;
}

.sparkle-button .particle:nth-of-type(even) {
	animation-direction: reverse;
}

@keyframes float-out {
	to {
		transform: rotate(360deg);
	}
}

.sparkle-button .text {
	translate: 2% -6%;
	letter-spacing: 0.01ch;
	background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
  background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	transition: background 0.25s;
	transition: background var(--transition);
}

.sparkle-button button svg {
	inline-size: 1.25em;
	translate: -25% -5%;
}


.client-main-container {
  padding: 0px;
}

.client-page-outer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--body__background);
}
.address-outer-container {
  padding: 20px;
  margin-top: -15px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-containers {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border__color);
}

.address-containers:last-child {
  border-bottom: none;
}

.address-containers label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  color: var(--sidepopup-label-color, #666);
  text-align: left;
  white-space: nowrap;
}

.address-containers .client-details-value {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  color: var(--header__color, #333);
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
}

@media (max-width: 768px) {
  .address-containers {
    grid-template-columns: 100px 1fr;
    gap: 8px;
  }

  .address-containers label {
    font-size: 13px;
  }

  .address-containers .client-details-value {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .address-outer-container {
    padding: 15px;
  }

  .address-containers {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .address-containers label {
    font-size: 12px;
    color: #666;
    color: var(--sidepopup-label-color, #666);
  }

  .address-containers .client-details-value {
    font-size: 13px;
  }
}
.clients-search-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.client-page-inner-container {
  margin: 6px 20px 20px 20px;
}

.sidepopup-client-main-container {
  padding: 20px 50px;
  height: 100vh;
  overflow: auto;
}

.client-candiadte-main-container {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

.client-details-new {
  /* border-bottom: 1px solid #cccccc; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 0px 20px 20px 0px;
}

.client-avatar-name {
  display: flex;
  gap: 10px;
  align-items: center;
}

.client-details-new-outer {
  padding: 0px 20px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* border: 1px solid #ccc;
  margin-bottom: 20px;
  border-radius: 8px; */
}

.client-tabs {
  padding: 20px;
}

.client-details-new img {
  width: 24px;
}

.company-email,
.company-mobile,
.company-website {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}

.company-name-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
}

.company-name {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

/* .jobs-details-outer-container {
  padding: 25px;
} */
.jobs-details-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #cccccc;
  margin-bottom: 20px;
}

.jobs-details-container-upper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 8px;
}

.jobs-details-container-lower {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 8px;
  align-items: baseline;
}

.jobs-skills-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #cccccc;
  padding: 10px;
  border-radius: 8px;
}

.job-buttons {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 10px;
  margin-top: 20px;
}

.client-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: -44px;
}

.back-to-clients-list-button {
  margin-left: 12px;
  display: flex;
}

.create-client-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.client-creation-button-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.client-buttons {
  display: flex;
  gap: 10px;
}

.client-employee-contentpage {
  max-height: 400px;
  overflow-y: auto;
}

.candidate-search-button-container {
  display: flex;
  justify-content: flex-end;
}

.client-jobs-outer-container {
  width: 100%;
  justify-self: center;
  text-align: center;
  padding: 20px;
}

.candidate-select-container {
  padding: 20px 50px;
  display: flex;
  align-items: center;
}

.candidate-select-container h4 {
  width: 100%;
}

.jobs-list-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.jobs-statuslegend {
  display: flex;
  gap: 20px;
}

.table-click {
  cursor: pointer;
  color: #7979e9;
  /* border-bottom: 1px solid #7979e9; */
}

.candidate-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 20px;
  row-gap: 20px;
}

.interview-card-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 20px;
  row-gap: 20px;
  margin-top: 20px;
}

.interview-card-container .card {
  width: 100%;
}

.icon-status {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.icon-status img {
  width: 25px;
  height: 25px;
}

.shortlist-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 25px;
  height: 400px;
  overflow-y: auto;
}

.shortlist-accordion-container {
  display: flex;
  gap: 40px;
}

.reply-icon {
  width: 50px;
  height: 50px;
}

/* client-details-popup */
.overview-details {
  margin: 0px 0px 20px 0px;
}

.client-overview-section {
  background-color: var(--body__background);
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.client-section-title {
  padding-bottom: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: var(--sidepopup-label-color);
  font-weight: 400;
  gap: 10px;
}

.icon-with-value {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  align-items: flex-start;
}

.icon-with-value:hover {
  opacity: 0.85;
}

.detail-icon {
  font-size: 20px;
  color: #6860ee;
  min-width: 24px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.info-header img {
  width: 20px;
  height: 20px;
}

.info-header-value {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--sidepopup-label-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-label {
  font-size: 16px;
  color: var(--sidepopup-label-color);
  margin: 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.client-details-value {
  margin: 0;
  font-size: 16px;
  color: var(--header__color);
  font-weight: 500;
}

.client-details-container {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border__color);
  border-radius: 16px;
}

.client-details-tabs-container {
  display: flex;
  gap: 60px;
  padding: 0px 20px;
  align-items: center;
  position: relative;
}

.client-tabs-container {
  display: flex;
}

.client-tabs-container .tab {
  padding: 15px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.client-edit-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* .client-details-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 500;
  color: #626262;
  transition: all 0.2s ease;
  position: relative;
  font-size: 16px;
  flex: 1;
  text-align: center;
} */

/* .client-details-tab-active {
  border: 1px solid #6860ee;
  padding: 5px 10px;
  border-radius: 8px 8px 0px 0px;
  background-color: #6860ee;
  color: #fff;
  cursor: pointer;
} */

.client-details-content-container {
  padding: 20px;
  height: calc(100% - 55px);
  overflow-y: auto;
}

.tab-icon {
  width: 20px;
  height: 20px;
}

.jobs-tab-container {
  height: 100%;
  overflow-y: auto;
}

@media (max-width: 1200px) {
  .jobs-details-container-upper {
    flex-wrap: wrap;
  }
}

@media (max-width: 1150px) {
  .client-details-new {
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
  }

  .company-mobile {
    justify-content: flex-start;
  }

  .jobs-list-card-container {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 750px) {
  .client-details-new {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .company-email,
  .company-mobile,
  .company-website {
    justify-content: flex-start;
  }
}

/* Clients Details Popup css */
.client-details-header {
  display: flex;
  justify-content: space-between;
}

.client-active-jobs {
  border: 1px solid #ccc;
  border-radius: 50px;
  padding: 4px 8px;
  color: #1d1d1d;
  font-weight: 500;
}

/* .client-details-tab {
  padding: 10px;
  border-radius: 8px 8px 0px 0px;
  background-color: var(--tab__background);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  width: 30%;
  justify-content: center;
  color: #6860EE;
} */

/* .client-details-tab-active {
  border: 1px solid #6860ee;
  padding: 10px;
  border-radius: 8px 8px 0px 0px;
  background-color: #6860ee;
  color: #fff;
  cursor: pointer;
} */
.client-details-content-container {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.tab-icon {
  width: 20px;
  object-fit: contain;
}

.create-client-details {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.create-client-contact-details {
  display: grid;
  grid-template-columns: 1fr;
}

.create-clients-contact-details {
  display: grid;
  grid-template-columns: 1fr;
}

/* .create-client-location-details { */
/* display: flex;
  flex-direction: column; */
/* display: grid;
  grid-template-columns: 1fr; */
/* align-items: baseline; */
/* } */
.create-address-container {
  display: grid;
  grid-template-columns: 1fr;
}

.create-client-location-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  /* display: flex;
  flex-direction: column;
  align-items: baseline; */
}

.client-search-container-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 64px;
  z-index: 8;
  background-color: var(--body__background);
  padding: 20px;
  width: -webkit-fill-available;
}

@media (max-width: 768px) {
  .client-search-container-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 89px;
    z-index: 8;
    background-color: var(--body__background);
    padding-top: 25px;
  }
}

/* Job listings styling */
.active-jobs {
  padding: 8px 0;
}

.view-all-link {
  color: #6860ee;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #6860ee;
  padding: 4px 8px;
  border-radius: 8px;
}

.view-all-link:hover {
  text-decoration: underline;
}

.job-listings {
  margin-top: 16px;
}

.job-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  background-color: white;
  transition: all 0.3s ease;
}

.job-logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f0f0ff;
  margin-right: 12px;
}

.job-logo i {
  font-size: 20px;
  color: #6860ee;
}

.job-item h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
}

.small.text-muted {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  background-color: #f5f7fa;
  color: #555;
  margin-right: 8px;
  margin-top: 8px;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 12px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.p-3 {
  padding: 12px;
}

.border {
  border: 1px solid #eee;
}

.rounded {
  border-radius: 8px;
}

.text-center {
  text-align: center;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Activity Tab Styling */
.activity-tab-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow-y: auto;
}

.client-tracking-maininnercontainer {
  border: 1px solid var(--border__color);
  border-radius: 8px;
  overflow: hidden;
}

.client-tracking-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  width: 100%;
}

.upperoutercontainer {
  padding: 20px;
}

.tracking-history-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  margin: -20px -20px 20px;
  padding: 20px;
  border-bottom: 1px solid var(--border__color);
}

.tracking-history-title {
  color: var(--header__color);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-top: 15px;
}

.tracking-history-subtitle {
  margin: 6px 0 0;
  color: var(--sidepopup-label-color);
  font-size: 14px;
  line-height: 20px;
}

.contact-filter-section {
  width: min(420px, 100%);
  flex-shrink: 0;
}

.contact-filter-label {
  display: block;
  color: var(--sidepopup-label-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 6px;
}

.contact-filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-filter-controls > .MuiAutocomplete-root {
  min-width: 280px;
  flex: 1 1;
}

.contact-filter-controls button {
  color: var(--sidepopup-label-color) !important;
}

.tracking-viewing-details {
  margin: -20px -20px 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border__color);
}

.tracking-viewing-label {
  color: var(--sidepopup-label-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.tracking-viewing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 22px;
  gap: 22px;
}

.tracking-viewing-person,
.tracking-viewing-item {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tracking-viewing-person {
  gap: 12px;
}

.tracking-viewing-item {
  gap: 10px;
}

.tracking-viewing-person > div,
.tracking-viewing-item > div {
  min-width: 0;
}

.tracking-viewing-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.75;
}

.tracking-contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #2f9bf4;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.tracking-contact-name,
.tracking-viewing-item-value {
  color: var(--header__color);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-viewing-item .client-details-value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-contact-designation,
.tracking-viewing-item-label,
.tracking-viewing-count {
  color: var(--sidepopup-label-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.add-client-contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
    column-gap: 25px;
    grid-row-gap: 20px;
    row-gap: 20px;
}

.view-contact-details-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 25px;
  column-gap: 25px;
  grid-row-gap: 25px;
  row-gap: 25px;
}

.view-contact-detail-item {
  min-width: 0;
}

.view-contact-detail-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--primary__color);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.view-contact-detail-label img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.view-contact-detail-value {
  margin: 0;
  color: var(--header__color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .view-contact-details-container {
    grid-template-columns: 1fr;
  }
}

.tracking-entry-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--header__color);
  /* vertical-align: middle; */
}

.tracking-entry-contact-name {
  color: #6860ee;  
  font-size: 17px;
  font-weight: 800;
  line-height: 10px;
  /* margin-top: -2px; */
}

.tracking-entry-contact-separator {
  color: var(--sidepopup-label-color);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.tracking-entry-contact-designation {
  color: #6860ee;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

.tracking-viewing-item-label {
  text-transform: uppercase;
}

.tracking-viewing-count {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .tracking-viewing-grid {
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .tracking-history-toolbar {
    flex-direction: column;
  }

  .contact-filter-section {
    width: 100%;
  }

  .tracking-viewing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tracking-viewing-count {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .contact-filter-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-filter-controls > .MuiAutocomplete-root {
    min-width: 100%;
  }

  .tracking-viewing-grid {
    grid-template-columns: 1fr;
  }
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.activity-timeline {
  position: relative;
  padding-left: 20px;
}

.activity-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 8px;
  width: 2px;
  background-color: #e6e6e6;
  z-index: 1;
}

.activity-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 20px;
}

.activity-item::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #6860ee;
  z-index: 2;
  border: 2px solid white;
}

.activity-date {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.activity-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.activity-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  background: #f7f7f7;
  padding: 8px;
}

.activity-job {
  font-size: 15px;
  font-weight: 600;
  color: #6860ee;
  display: flex;
  align-items: center;
}

.activity-job i {
  color: #6860ee;
}

.activity-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.activity-detail {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  gap: 10px;
}

.activity-detail i {
  color: #6860ee;
}

.no-activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #888;
  text-align: center;
}

.no-activity-icon {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 16px;
}

.mr-2 {
  margin-right: 8px;
}

.edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.location-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}

.client-overview-section input {
  margin-bottom: 10px;
  width: -webkit-fill-available;
  color: var(--header__color);
  background-color: var(--body__background);
  padding: 10px;
  font-size: 15px;
  border: 1px solid #c4c2c2;
  border-radius: 12px;
  font-weight: 500;
}

.client-overview-section input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

/* .client-name-edit {
  padding: 20px 20px 0;
} */

.client-name-edit input {
  width: -webkit-fill-available;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 15px;
}

.client-workspace-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.client-workspace-outer-container { 
  text-align: center;
  margin-top: 5px;
}

.client-workspace-outer-main-container {
  display: flex;
  width: 100%;
  /* height: 185vh; */
  justify-content: center;
  align-items: center;
  /* margin-top: -50px; */
}

.client-name-edit input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

.client-candidate-info-outer-container {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--border__color);
  border-radius: 16px;
}

.client-candidate-info-outer-container .candidate-information:last-child {
  border-right: none;
}

.client-details-inner-container .candidate-information {
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 20px;
  border-right: none;
}

.client-candidate-info-outer-container.edit-mode {
  flex-direction: column;
  overflow-x: hidden;
}

.client-candidate-info-outer-container.edit-mode .detail-content {
  display: flex;
  flex-direction: column;
  width: 95%;
}

.candidate-information.edit-mode {
  padding: 0px;
  border-right: none;
}

@media screen and (max-width: 1065px) {
  .client-candidate-info-outer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: column;
    border: 1px solid var(--border__color);
    border-radius: 16px;
  }
}

@media screen and (max-width: 480px) {
  .client-details-inner-container .candidate-information {
    flex-direction: column;
  }
}

.workspace-outer-main-container .lf-player-container{
  margin-top: -40px;
}

.workspace-outer-main-container-loader {
  padding-top: 70px;
}
:root {
  --client-side-popup-w: 44%;
}
@media (max-width: 610px) {
  :root {
    --client-side-popup-w: 70%;
  }
}
.client-jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}
@media (max-width: 1345px) {
  .client-jobs-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 922px) {
  .client-jobs-grid {
    grid-template-columns: 1fr;
  }
}

@charset "UTF-8";
.szh-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  width: -webkit-max-content;
  width: max-content;
  z-index: 100;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.szh-menu:focus {
  outline: none;
}
.szh-menu__arrow {
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border: 1px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
}
.szh-menu__arrow--dir-left {
  right: -0.375rem;
  transform: translateY(-50%) rotate(135deg);
}
.szh-menu__arrow--dir-right {
  left: -0.375rem;
  transform: translateY(-50%) rotate(-45deg);
}
.szh-menu__arrow--dir-top {
  bottom: -0.375rem;
  transform: translateX(-50%) rotate(-135deg);
}
.szh-menu__arrow--dir-bottom {
  top: -0.375rem;
  transform: translateX(-50%) rotate(45deg);
}
.szh-menu__item {
  cursor: pointer;
}
.szh-menu__item:focus {
  outline: none;
}
.szh-menu__item--hover {
  background-color: #ebebeb;
}
.szh-menu__item--focusable {
  cursor: default;
  background-color: inherit;
}
.szh-menu__item--disabled {
  cursor: default;
  color: #aaa;
}
.szh-menu__group {
  box-sizing: border-box;
}
.szh-menu__radio-group {
  margin: 0;
  padding: 0;
  list-style: none;
}
.szh-menu__divider {
  height: 1px;
  margin: 0.5rem 0;
  background-color: rgba(0, 0, 0, 0.12);
}

.szh-menu-button {
  box-sizing: border-box;
}

.szh-menu {
  -webkit-user-select: none;
          user-select: none;
  color: #212529;
  border: none;
  border-radius: 0.25rem;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
  min-width: 10rem;
  padding: 0.5rem 0;
}
.szh-menu__item {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.375rem 1.5rem;
}
.szh-menu-container--itemTransition .szh-menu__item {
  transition-property: background-color, color;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}
.szh-menu__item--type-radio {
  padding-left: 2.2rem;
}
.szh-menu__item--type-radio::before {
  content: "○";
  position: absolute;
  left: 0.8rem;
  top: 0.55rem;
  font-size: 0.8rem;
}
.szh-menu__item--type-radio.szh-menu__item--checked::before {
  content: "●";
}
.szh-menu__item--type-checkbox {
  padding-left: 2.2rem;
}
.szh-menu__item--type-checkbox::before {
  position: absolute;
  left: 0.8rem;
}
.szh-menu__item--type-checkbox.szh-menu__item--checked::before {
  content: "✔";
}
.szh-menu__submenu > .szh-menu__item {
  padding-right: 2.5rem;
}
.szh-menu__submenu > .szh-menu__item::after {
  content: "❯";
  position: absolute;
  right: 1rem;
}
.szh-menu__header {
  color: #888;
  font-size: 0.8rem;
  padding: 0.2rem 1.5rem;
  text-transform: uppercase;
}

.simple-search-container {
  padding: 15px; 
  background-color: var(--body__background);
  border: 1px solid var(--global-search-container-border); 
  border-radius: 16px; 
}
.simple-search-container:has(.recommended-search-header.collapsed) {
  padding: 15px 15px 0 15px;
}
.recommended-search-container textarea:focus {
  border: 1px solid var(--search-input-section-border);
  outline: none !important;
  box-shadow: none !important;
}
.recommended-search-container textarea {
  resize: none;
}
.jd-field-with-button {
  display: flex;
  width: 100%;
  align-items: center;
}
.recommended-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -15px -15px 0 -15px;
  padding: 8px 16px;
  /* background-color: #F6FAFF; faint blue background like Figma */
  background-color: var(--search-header-background-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-bottom: 15px;
}

.recommended-search-header.collapsed {
  margin-bottom: 0 !important;
}

.jelly-icon {
  width: 20px;
  height: 30px;
}

.recommended-search-title {
  font-size: 18px;
  font-weight: bold;
  /* color: #1669D8; */
  color: var(--search-title-color);
}

.recommended-search-subtext {
  font-size: 14px;
  color: var(--search-subtext-color);
  font-style: italic;
  margin-left: auto;
}

.recommended-header-actions {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
}

.rec-search-input-section-wrap {
  padding-bottom: 15px;
  background-color: var(--body__background);
}

.rec-search-input-section {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 12px;
}

.simple-inline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 5px;
  box-sizing: border-box;
  /* border-top: 1px solid var(--search-input-section-border);
  border-bottom: 1px solid var(--search-input-section-border); */
}

.simple-chat-inline-actions {
     display: flex;
  align-items: center;
  gap: 10px;
}

.rec-inline-actions-left {
  margin-left: 0;
  margin-left: 8px;
}

.cephea-chat-pill {
  display: inline-flex;      
  align-items: center;           
  gap: 8px;                    
  background: #FFFFFF;
  background-color: #FFFFFF !important;
  color: #2064ED !important;
  border: 1px solid #DBDBDB !important;
  border-radius: 9999px !important; 
  padding: 10px 16px !important;
  white-space: nowrap;           
  width: -webkit-max-content;           
  width: max-content;       
  line-height: 1;                 
  flex-shrink: 0;                 
  text-decoration: none;      
  font-weight: 500;
}

.cephea-chat-pill .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;              
}

.cephea-chat-pill:hover {
   background-color: #FFFFFF !important;
   color: #2064ED !important;
}

.cephea-filter-chat-pill {
  display: inline-flex;      
  align-items: center;           
  gap: 8px;                    
  background: #FFFFFF;
  background-color: #FFFFFF !important;
  color: #2064ED !important;
  border: 1px solid #DBDBDB !important;
  white-space: nowrap;           
  width: -webkit-max-content;           
  width: max-content;       
  line-height: 1;                 
  flex-shrink: 0;                 
  text-decoration: none;      
  font-weight: 500;
}

.cephea-filter-chat-pill .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;              
}

.cephea-filter-chat-pill:hover {
   background-color: #FFFFFF !important;
   color: #2064ED !important;
}

.cephea-clear-search-button {
    background: transparent !important;
    padding: 8px 14px;
    color: rgb(177, 174, 174) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    width: -webkit-max-content;
    width: max-content;
    line-height: 1;
    flex-shrink: 0;
}

.toggle-icon {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.toggle-icon.collapsed {
  transform: rotate(180deg);
}

.search-input-with-advanced {
  width: 100%;
}

.advanced-search-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 41px;
  border: 1px solid var(--search-input-section-border);
  border-left: none;
  border-right: none;;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rec-search-input-section {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 12px;
  position: relative;
}
.rec-search-input-section textarea {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.advanced-search-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.advanced-search-fields > .advanced-field {
  min-width: 0;
}

.advanced-filter-sidepopup .sidepopup-header-container {
  align-items: flex-start !important;
  padding: 0 !important;
}

.advanced-filter-sidepopup .sidepopup-modal-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.advanced-filter-sidepopup > div:first-of-type {
  padding: 18px 20px 14px !important;
}

.advanced-filter-sidepopup .custom-header-content {
  width: auto !important;
  flex: 1 1;
  min-width: 0;
}

.advanced-filter-sidepopup .sidepopup-header-container > div:last-child {
  margin-left: 12px !important;
}

.advanced-filter-sidepopup .sidepopup-header-container svg {
  width: 20px;
  height: 20px;
  color: var(--header__color);
}

.advanced-search-popup-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.advanced-search-popup-header h2 {
  margin: 0;
  color: var(--header__color);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.advanced-search-popup-header p {
  margin: 0;
  color: #7c8aa5;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.advanced-field {
  display: flex;
  align-items: center;
  /* flex: 1; */
  position: relative;
}

.advanced-field--experience {
  flex: 0 0 150px;
}

.advanced-field--wide {
  flex: 1 1 190px;
}

.form-field {
  width: 100%;
}

.field-icon {
  position: absolute;
  left: 10px;
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

.advanced-input {
  width: 100%;
  padding: 8px 10px 8px 35px;
  border: 1px solid var(--search-input-section-border);
  border-radius: 6px;
  background-color: var(--body__background);
  color: var(--header__color);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.advanced-input:focus {
  outline: none;
  border-color: #6860ee;
}

.advanced-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.experience-input {
  max-width: 200px;
}

.location-input {
  max-width: 300px;
}

@media (max-width: 768px) {
  .advanced-search-fields {
    flex-direction: column;
    gap: 8px;
  }
  
  .experience-input,
  .location-input {
    max-width: 100%;
  }
}
.rec-search-input-section:has(.cephea-chat-pill) .search-button-sharp-left {
  width: 152px; 
}

@media (max-width: 640px) {
  .rec-search-input-section:has(.cephea-chat-pill) .search-button-sharp-left {
    width: 136px;
  }
}

.rec-search-input-section:has(.cephea-filter-chat-pill) .search-button-sharp-left {
  width: 152px; 
}

@media (max-width: 640px) {
  .rec-search-input-section:has(.cephea-filter-chat-pill) .search-button-sharp-left {
    width: 136px;
  }
}

.simple-search-container .simple-search-advanced-input:focus {
  border-color: var(--search-input-section-border) !important;
  box-shadow: none !important;
}

.simple-search-container .simple-search-advanced-input:focus-visible {
  border-color: #6860ee !important;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2) !important;
}

.candidate-filter-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  background: var(--sidepopup-background, #ffffff);
  font-family: Satoshi, sans-serif;
  box-sizing: border-box;
}

.candidate-filter-drawer-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
}

.candidate-filter-section {
  display: flex;
  flex-direction: column;
}

.candidate-filter-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  padding-bottom: 6px;
}

.candidate-filter-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  color: var(--header__color, #1e293b);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.candidate-filter-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6860ee;
}

.candidate-filter-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f0efff;
  color: #6860ee;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.candidate-filter-chevron {
  font-size: 20px !important;
  color: #6860ee;
  transition: transform 0.2s ease;
}

.candidate-filter-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.candidate-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.candidate-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  color: var(--sidepopup-label-color, #475569);
  font-size: 12.5px;
  font-weight: 500;
}

.candidate-filter-label svg,
.candidate-filter-label img {
  width: 15px;
  height: 15px;
  font-size: 15px !important;
  color: #475569;
  color: var(--sidepopup-label-color, #475569);
  flex-shrink: 0;
}

.candidate-filter-input {
  height: 34px !important;
  padding: 6px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border: 1px solid var(--search-input-section-border, #e2e8f0) !important;
  border-radius: 8px !important;
  color: #1e293b !important;
  color: var(--header__color, #1e293b) !important;
  font-size: 13px !important;
  background: #ffffff !important;
  background: var(--sidepopup-background, #ffffff) !important;
  line-height: 1.2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  font-family: inherit !important;
}

.candidate-filter-input::placeholder {
  color: #9aa0a6;
  opacity: 1;
}

.candidate-filter-input:focus {
  border-color: #6860ee !important;
}

.candidate-filter-experience-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
}

.candidate-filter-selectlike {
  position: relative;
  width: 100%;
}

.candidate-filter-selectlike .candidate-filter-input {
  padding-right: 30px !important;
}

.candidate-filter-selectlike-icon {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #7c8aa5;
  font-size: 18px !important;
  pointer-events: none;
  transform: translateY(-50%);
}

.candidate-filter-select-menu {
  z-index: 1402 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
}

.candidate-filter-select-menu .MuiMenuItem-root {
  min-height: 36px;
  font-size: 13px;
}

.candidate-date-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.candidate-date-range-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--search-input-section-border);
  border-radius: 8px;
  background: var(--body__background);
  color: var(--header__color);
  cursor: pointer;
  padding: 6px 10px;
  font-family: Satoshi;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.candidate-date-range-control:hover {
  border-color: #6860ee;
}

.candidate-date-range-control span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-date-range-control .is-placeholder {
  color: #9aa0a6;
}

.candidate-date-range-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.candidate-date-range-separator {
  color: var(--header__color);
  flex-shrink: 0;
}

.candidate-filter-drawer-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--border__color, #e2e8f0);
  background: #ffffff;
  background: var(--sidepopup-background, #ffffff);
  box-sizing: border-box;
}

.candidate-filter-reset-btn {
  background: transparent;
  border: 1px solid #7c6cf0;
  color: #7c6cf0;
  border-radius: 8px;
  padding: 7px 24px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.candidate-filter-reset-btn:hover {
  background: rgba(124, 108, 240, 0.08);
}

.candidate-filter-apply-btn {
  background: #6860ee;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.candidate-filter-apply-btn:hover {
  background: #574ee8;
}

.candidate-filter-apply-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.candidate-stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

/* Dark mode adjustments */
.dark-theme .candidate-filter-badge,
[data-theme="dark"] .candidate-filter-badge {
  background: rgba(157, 151, 245, 0.2);
  color: #9d97f5;
}

.dark-theme .candidate-filter-reset-btn,
[data-theme="dark"] .candidate-filter-reset-btn {
  border-color: #9d97f5;
  color: #9d97f5;
}

.dark-theme .candidate-filter-reset-btn:hover,
[data-theme="dark"] .candidate-filter-reset-btn:hover {
  background: rgba(157, 151, 245, 0.12);
}

.stage-popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1199;
  pointer-events: auto;
}

.stage-popup {
  position: fixed;
  right: 20px;
  top: 70px;
  width: 400px;
  max-width: 95vw;
  max-height: calc(100vh - 100px);
  background: #ffffff;
  background: var(--body__background, #ffffff);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  font-family: inherit;
  z-index: 1200;
  pointer-events: auto;
}

.stage-popup.recent-track-filter-popup {
  width: 520px;
}

.stage-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.stage-popup-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--header__color);
}

.stage-popup-subtitle {
  font-size: 12px;
  color: #9AA0A6;
  margin-top: 4px;
}

.stage-popup-close {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: var(--header__color);
  transition: background-color 0.2s ease;
}

.stage-popup-close:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.stage-popup-close img {
  width: 16px;
  height: 16px;
}

.stage-popup-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: visible;
  flex: 1 1;
  min-height: 0;
  padding: 4px 0;
}

.stage-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  overflow: visible;
}

.stage-filter-controls {
  display: flex;
  gap: 8px;
  flex: 1 1;
  align-items: center;
  width: 100%;
  overflow: visible;
  position: relative;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--header__color);
  width: 34%;
  flex-shrink: 0;
  padding-left: 4px;
}

.filter-label-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.stage-filter-type-select {
  min-width: 140px;
  padding: 8px 12px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: var(--header__color);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.stage-filter-type-select:hover {
  border-color: #6860ee;
}

.stage-filter-type-select:focus {
  border-color: #6860ee;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.1);
}

.stage-filter-value-wrapper {
  position: relative;
  width: 57%;
  flex-shrink: 0;
  overflow: visible;
  z-index: 1;
}

.date-filter-wrapper {
  position: relative;
  width: 57%;
  flex-shrink: 0; 
  overflow: visible;
  z-index: 1;
}
.date-filter-wrapper > * {
  width: 100%;
}

.stage-date-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 57%;
  flex-shrink: 0;
  min-width: 0;
}

.stage-date-range-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--border__color);
  border-radius: 4px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: var(--header__color);
  cursor: pointer;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}

.stage-date-range-control:hover {
  border-color: #6860ee;
}

.stage-date-range-control span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-date-range-control .is-placeholder {
  color: #9AA0A6;
}

.stage-date-range-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.stage-date-range-separator {
  color: var(--header__color);
  flex-shrink: 0;
}

.recent-track-filter-popup .filter-label {
  width: 28%;
}

.recent-track-filter-popup .stage-filter-value-wrapper,
.recent-track-filter-popup .stage-date-range-wrapper {
  width: 66%;
}

.stage-filter-stage-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: var(--header__color);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
  transition: border-color 0.2s ease;
  text-align: left;
}

.stage-filter-stage-select:hover {
  border-color: #6860ee;
}

.stage-filter-stage-select:focus {
  border-color: #6860ee;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.1);
}

.stage-filter-stage-value {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--header__color);
}


.stage-filter-arrow {
  font-size: 10px;
  color: var(--header__color);
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.stage-filter-stage-select--open .stage-filter-arrow {
  transform: rotate(180deg);
}
.stage-list-dropdown {
  position: fixed; 
  min-width: 220px;   
  max-width: 90vw;
  max-height: 300px;
  overflow-y: auto;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  border: 1px solid var(--border__color);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 9999; 
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  will-change: transform, opacity;
} 

.stage-list-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
  outline: none;
}

.stage-list-dropdown-item:hover,
.stage-list-dropdown-item:focus {
  background-color: rgba(0, 0, 0, 0.04);
}

.stage-list-dropdown-item--selected {
  background-color: rgba(104, 96, 238, 0.1);
}

.stage-list-dropdown-empty {
  padding: 12px;
  text-align: center;
  color: #9AA0A6;
  font-size: 14px;
}

.stage-filter-remove {
  padding: 8px 12px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: var(--header__color);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.stage-filter-remove:hover {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

.stage-popup-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 12px;
  flex-shrink: 0;
}

.stage-popup-actions > * {
  min-width: 100px;
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.stage-label {
  font-size: 14px;
  color: var(--header__color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-list-dropdown::-webkit-scrollbar {
  width: 8px;
}

.stage-list-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.stage-list-dropdown::-webkit-scrollbar-thumb {
  background: #6860ee;
  border-radius: 4px;
}

.stage-list-dropdown::-webkit-scrollbar-thumb:hover {
  background: #5c47ce;
}
.stage-popup-body::-webkit-scrollbar {
  width: 8px;
}

.stage-popup-body::-webkit-scrollbar-track {
  background: transparent;
}

.stage-popup-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.stage-popup-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.candidate-view-selection {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.candidate-view-selection .can-btn {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: var(--header__color);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.candidate-view-selection .can-btn:hover {
  border-color: #6860ee;
  background-color: rgba(104, 96, 238, 0.05);
}

.candidate-view-selection .can-btn.active {
  background-color: #6860ee;
  color: #ffffff;
}
.client-cards-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
  grid-gap: 20px;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  /* padding: 25px; */
}
@media (max-width: 1190px) {
  .client-cards-container {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    /* padding: 25px; */
  }
}
@media (max-width: 768px) {
  .client-cards-container {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: 1fr;
    /* padding: 25px; */
  }
}
img.client-header-card-icon {
  width: 25px;
  height: 25px;
}
img.client-inner-card-icon {
  width: 20px;
  height: 20px;
}
span.client-contact-text {
  font-size: 14px;
  font-weight: 400;
}
.client-contact {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
  margin-bottom: 15px;
}

.client-card {
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--card__border);
  background-color: var(--card__background);
  width: 100%;
  height: 100%;
}

.client-card-header {
  border-bottom: 1px solid var(--card__border);
  /* margin-bottom: 12px; */
  padding: 10px;
  border-radius: 12px 12px 0px 0px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.client-details-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.edit-icon-container {
  cursor: pointer;
  /* background-color: var(--body__background); */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid #e0e0e0;
}

.edit-icon-container:hover {
  background-color: #efe9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(104, 96, 238, 0.2);
}

.edit-icon {
  width: 18px;
  height: 18px;
}

.client-card.dark-mode .client-card-header {
  border-bottom-color: #4a5568;
}

.client-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3748;
}

.client-card.dark-mode .client-name {
  color: #ffffff;
}

.client-industry {
  font-size: 14px;
  color: #4a5568;
  margin-top: 4px;
}

.client-card.dark-mode .client-industry {
  color: #a0aec0;
}

.client-card-body {
  /* margin-bottom: 16px; */
  padding: 1px 12px;
  margin-top: 12px;
  /* background-color: var(--client_card_background); */
}

.contact-icon,
.website-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

h5.client-contact-header {
  margin-bottom: 0px;
}

.client-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  /* background-color: var(--client_card_background); */
  border-radius: 12px;
}
.global-search-container {
  /* width: 100%; */
  padding: 15px;
  background-color: var(--body__background);
  border: 1px solid var(--global-search-container-border);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
}
.global-search-container textarea:focus {
  border: 1px solid var(--search-input-section-border);
  outline: none !important;
  box-shadow: none !important;
}
.global-search-container.collapsed {
  padding-bottom: 0 !important;
}
.global-search-container textarea {
  resize: none;
}
.search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -15px -15px 0 -15px;
  padding: 8px 16px;
  background-color: var(--search-header-background-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-bottom: 15px;
}
.search-header.collapsed {
  margin-bottom: 0 !important;
}
.jelly-icon {
  width: 20px;
  height: 30px;
}

.search-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--search-title-color);
}

.search-subtext {
  font-size: 14px;
  color: var(--search-subtext-color);
  font-style: italic;
  margin-left: auto;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
}

.search-input-section-wrap {
  padding-bottom: 2px;
  background-color: var(--body__background);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
}

.search-input-section {
  display: flex;
  align-items: center;
  gap: 1px;
  width: 100%;
}

.search-by-dropdown {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-left: 10px;
  gap: 10px;
}

.search-by-label {
  font-size: 14px;
  color: var(--search-title-color);
  margin-right: 10px;
  font-weight: 500;
  width: -webkit-max-content;
  width: max-content;
}

.search-dropdown, .secondary-dropdown {
  min-width: 150px;
  /* width: auto;
  max-width: 100%; */
}

.selected-option {
  color: var(--search-title-color);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--primary__color);
  display: flex;
  align-items: center;
  /* min-width: 100px; */
  justify-content: space-between;
  background-color: var(--body__background);
}

.dropdown-arrow {
  font-size: 10px;
  margin-left: 8px;
  color: inherit;
}

.selected-option:hover {
  background-color: var(--primary__color);
  color: #ffffff;
}

.selected-option.active {
  background-color: var(--primary__color);
  color: #ffffff;
}

.search-dropdown-menu {
  border-radius: 8px;
  margin-top: 5px;
  width: auto !important;
  max-width: 100% !important;
}

.MuiMenu-paper {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Keep the original styles for reference */
.search-suggestions {
  display: none; /* Hide the original suggestions */
}


.toggle-icon {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.toggle-icon.collapsed {
  transform: rotate(180deg);
}

/* .search-button-sharp-left {
    
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--search-button-background-color);
    color: #ffffff;
    background-image: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.6) 8%,
        rgba(255, 255, 255, 0.05) 16%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: delayed-shine 2s ease-in-out infinite;
} */

/* .filter-button-sharp-allside {
  border-top: 1px solid var(--search-input-section-border);
  border-bottom: 1px solid var(--search-input-section-border);
  border-left: none;
  border-right: none;

  background-color: var(--body__background);
  border-radius: 0; 
} */


/* Responsive CSS */

@media (max-width: 768px) {
  .search-input-section-wrap {
    flex-direction: column;
    gap: 0;
  }
  .search-input-section {
    padding-top: 0;
  }
}
.client-main-container {
  padding: 0px;
}

.client-page-outer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--body__background);
}
.add-contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
    column-gap: 25px;
    grid-row-gap: 10px;
    row-gap: 10px;
}
.address-outer-container {
  padding: 20px;
  margin-top: -15px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.document-label-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.vendor-documents-containers {
  border-bottom: 1px solid var(--border__color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vendor-documents-containers:last-child {
  border-bottom: none;
}

.vendor-documents-containers label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  color: var(--sidepopup-label-color, #666);
  text-align: left;
  white-space: nowrap;
}
.address-containers {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border__color);
}

.address-containers:last-child {
  border-bottom: none;
}

.address-containers label {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  color: var(--sidepopup-label-color, #666);
  text-align: left;
  white-space: nowrap;
}

.address-containers .client-details-value {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  color: var(--header__color, #333);
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
}

@media (max-width: 768px) {
  .address-containers {
    grid-template-columns: 100px 1fr;
    gap: 8px;
  }

  .address-containers label {
    font-size: 13px;
  }

  .address-containers .client-details-value {
    font-size: 14px;
  }
}
.vendor-selection-popup-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--body__background);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.vendorselection-cards-container {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .vendorselection-cards-container {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .address-outer-container {
    padding: 15px;
  }

  .address-containers {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .address-containers label {
    font-size: 12px;
    color: #666;
    color: var(--sidepopup-label-color, #666);
  }

  .address-containers .client-details-value {
    font-size: 13px;
  }
}
.clients-search-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.sidepopup-client-main-container {
  padding: 20px 50px;
  height: 100vh;
  overflow: auto;
}

.client-candiadte-main-container {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

.client-details-new {
  /* border-bottom: 1px solid #cccccc; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 0px 20px 20px 0px;
}

.client-avatar-name {
  display: flex;
  gap: 10px;
  align-items: center;
}

.client-details-new-outer {
  padding: 0px 20px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* border: 1px solid #ccc;
  margin-bottom: 20px;
  border-radius: 8px; */
}

.client-tabs {
  padding: 20px;
}

.client-details-new img {
  width: 24px;
}

.company-email,
.company-mobile,
.company-website {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}

.company-name-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
}

.company-name {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

/* .jobs-details-outer-container {
  padding: 25px;
} */
.jobs-details-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #cccccc;
  margin-bottom: 20px;
}

.jobs-details-container-upper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 8px;
}

.jobs-details-container-lower {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 8px;
  align-items: baseline;
}

.jobs-skills-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #cccccc;
  padding: 10px;
  border-radius: 8px;
}

.job-buttons {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 10px;
  margin-top: 20px;
}

.client-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: -44px;
}

.create-client-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.client-creation-button-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.client-buttons {
  display: flex;
  gap: 10px;
}

.client-employee-contentpage {
  max-height: 400px;
  overflow-y: auto;
}

.candidate-search-button-container {
  display: flex;
  justify-content: flex-end;
}

.client-jobs-outer-container {
  width: 100%;
  justify-self: center;
  text-align: center;
  padding: 20px;
}

.candidate-select-container {
  padding: 20px 50px;
  display: flex;
  align-items: center;
}

.candidate-select-container h4 {
  width: 100%;
}

.jobs-list-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.jobs-statuslegend {
  display: flex;
  gap: 20px;
}

.table-click {
  cursor: pointer;
  color: #7979e9;
  /* border-bottom: 1px solid #7979e9; */
}

.candidate-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 20px;
  row-gap: 20px;
}

.interview-card-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 20px;
  row-gap: 20px;
  margin-top: 20px;
}

.interview-card-container .card {
  width: 100%;
}

.icon-status {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.icon-status img {
  width: 25px;
  height: 25px;
}

.shortlist-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 25px;
  height: 400px;
  overflow-y: auto;
}

.shortlist-accordion-container {
  display: flex;
  gap: 40px;
}

.reply-icon {
  width: 50px;
  height: 50px;
}

/* client-details-popup */
.overview-details {
  margin: 0px 0px 20px 0px;
}

.client-overview-section {
  background-color: var(--body__background);
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.client-section-title {
  padding-bottom: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: var(--sidepopup-label-color);
  font-weight: 400;
  gap: 10px;
}

.icon-with-value {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  align-items: flex-start;
}

.icon-with-value:hover {
  opacity: 0.85;
}

.detail-icon {
  font-size: 20px;
  color: #6860ee;
  min-width: 24px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.info-header img {
  width: 20px;
  height: 20px;
}

.info-header-value {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--sidepopup-label-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-label {
  font-size: 16px;
  color: var(--sidepopup-label-color);
  margin: 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.client-details-value {
  margin: 0;
  font-size: 16px;
  color: var(--header__color);
  font-weight: 500;
}

.client-details-container {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border__color);
  border-radius: 16px;
}

.client-details-tabs-container {
  display: flex;
  gap: 60px;
  padding: 0px 20px;
  align-items: center;
  position: relative;
}

.client-tabs-container {
  display: flex;
  gap: 3vw;
}

.client-tabs-container .tab {
  padding: 15px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.client-edit-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* .client-details-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 500;
  color: #626262;
  transition: all 0.2s ease;
  position: relative;
  font-size: 16px;
  flex: 1;
  text-align: center;
} */

/* .client-details-tab-active {
  border: 1px solid #6860ee;
  padding: 5px 10px;
  border-radius: 8px 8px 0px 0px;
  background-color: #6860ee;
  color: #fff;
  cursor: pointer;
} */

.client-details-content-container {
  padding: 20px;
  height: calc(100% - 55px);
  overflow-y: auto;
}

.tab-icon {
  width: 20px;
  height: 20px;
}

.jobs-tab-container {
  height: 100%;
  overflow-y: auto;
}

@media (max-width: 1200px) {
  .jobs-details-container-upper {
    flex-wrap: wrap;
  }
}

@media (max-width: 1150px) {
  .client-details-new {
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
  }

  .company-mobile {
    justify-content: flex-start;
  }

  .jobs-list-card-container {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 750px) {
  .client-details-new {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .company-email,
  .company-mobile,
  .company-website {
    justify-content: flex-start;
  }
}

/* Clients Details Popup css */
.client-details-header {
  display: flex;
  justify-content: space-between;
}

.client-active-jobs {
  border: 1px solid var(--border__color);
  border-radius: 50px;
  padding: 4px 8px;
  color: #1d1d1d;
  font-weight: 500;
}

/* .client-details-tab {
  padding: 10px;
  border-radius: 8px 8px 0px 0px;
  background-color: var(--tab__background);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  width: 30%;
  justify-content: center;
  color: #6860EE;
} */

/* .client-details-tab-active {
  border: 1px solid #6860ee;
  padding: 10px;
  border-radius: 8px 8px 0px 0px;
  background-color: #6860ee;
  color: #fff;
  cursor: pointer;
} */
.client-details-content-container {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--border__color);
}

.tab-icon {
  width: 20px;
  object-fit: contain;
}

.create-client-details {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.vendor-clienţ-bank-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
  grid-gap: 10px;
  gap: 10px;
}

.vendor-client-file-input {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 15px;
  grid-template-columns: 1fr 1fr;
}

.vendor-client-file-input > div {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.vendor-client-file-input label {
  font-weight: 500;
  margin-bottom: 5px;
}

.vendor-client-file-input input[type="file"],
.vendor-client-file-input select {
  padding: 5px;
  border: 1px solid var(--border__color);
  border-radius: 4px;
}

.vendor-client-file-input .error {
  color: red;
  font-size: 12px;
  margin-top: 4px;
}

.create-client-contact-details {
  display: grid;
  grid-template-columns: 1fr;
}

.create-clients-contact-details {
  display: grid;
  grid-template-columns: 1fr;
}

/* .create-client-location-details { */
/* display: flex;
  flex-direction: column; */
/* display: grid;
  grid-template-columns: 1fr; */
/* align-items: baseline; */
/* } */
.create-address-container {
  display: grid;
  grid-template-columns: 1fr;
}

.create-client-location-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  /* display: flex;
  flex-direction: column;
  align-items: baseline; */
}

.vendor-search-container-wrapping {
  position: -webkit-sticky;
  position: sticky;
  top: 64px;
  z-index: 8;
  background-color: var(--body__background);
  padding: 20px;
  width: -webkit-fill-available;
}

.back-to-vendors-list-button {
  display: flex;
  margin-top: 10px;
  margin-left: 12px;
}

.vendorselection-search-container-wrapping {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 8;
  background-color: var(--body__background);
  padding: 5px 20px 8px;
  width: -webkit-fill-available;
}

@media (max-width: 768px) {
  .vendor-search-container-wrapping {
    position: -webkit-sticky;
    position: sticky;
    top: 89px;
    z-index: 8;
    background-color: var(--body__background);
    padding-top: 25px;
  }
}

/* Job listings styling */
.active-jobs {
  padding: 8px 0;
}

.view-all-link {
  color: #6860ee;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #6860ee;
  padding: 4px 8px;
  border-radius: 8px;
}

.view-all-link:hover {
  text-decoration: underline;
}

.job-listings {
  margin-top: 16px;
}

.job-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  background-color: white;
  transition: all 0.3s ease;
}

.job-logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f0f0ff;
  margin-right: 12px;
}

.job-logo i {
  font-size: 20px;
  color: #6860ee;
}

.job-item h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
}

.small.text-muted {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  background-color: #f5f7fa;
  color: #555;
  margin-right: 8px;
  margin-top: 8px;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 12px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.p-3 {
  padding: 12px;
}

.border {
  border: 1px solid #eee;
}

.rounded {
  border-radius: 8px;
}

.text-center {
  text-align: center;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Activity Tab Styling */
.activity-tab-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow-y: auto;
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.activity-timeline {
  position: relative;
  padding-left: 20px;
}

.activity-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 8px;
  width: 2px;
  background-color: #e6e6e6;
  z-index: 1;
}

.activity-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 20px;
}

.activity-item::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #6860ee;
  z-index: 2;
  border: 2px solid white;
}

.activity-date {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.activity-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.activity-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  background: #f7f7f7;
  padding: 8px;
}

.activity-job {
  font-size: 15px;
  font-weight: 600;
  color: #6860ee;
  display: flex;
  align-items: center;
}

.activity-job i {
  color: #6860ee;
}

.activity-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.activity-detail {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  gap: 10px;
}

.activity-detail i {
  color: #6860ee;
}

.no-activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #888;
  text-align: center;
}

.no-activity-icon {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 16px;
}

.mr-2 {
  margin-right: 8px;
}

.edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.location-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}
.bank-detail-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}
.client-overview-section input {
  margin-bottom: 10px;
  width: -webkit-fill-available;
  color: var(--header__color);
  background-color: var(--body__background);
  padding: 10px;
  font-size: 15px;
  border: 1px solid #c4c2c2;
  border-radius: 12px;
  font-weight: 500;
}

.client-overview-section input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

/* .client-name-edit {
  padding: 20px 20px 0;
} */

.client-name-edit input {
  width: -webkit-fill-available;
  padding: 10px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 15px;
}

.client-name-edit input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

.vendor-candidate-info-outer-container {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--border__color);
  border-radius: 16px;
}

.vendor-candidate-info-outer-container .candidate-information:last-child {
  border-right: none;
}

.client-details-inner-container .candidate-information {
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 20px;
  border-right: none;
}

.vendor-candidate-info-outer-container.edit-mode {
  flex-direction: column;
  overflow-x: hidden;
}

.vendor-candidate-info-outer-container.edit-mode .detail-content {
  display: flex;
  flex-direction: column;
  width: 95%;
}

.candidate-information.edit-mode {
  padding: 0px;
  border-right: none;
}

@media screen and (max-width: 1024px) {
  .vendor-candidate-info-outer-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border__color);
    border-radius: 16px;
  }
}

@media screen and (max-width: 480px) {
  .client-details-inner-container .candidate-information {
    flex-direction: column;
  }
}

.vendor-workspace-outer-container {
  border-radius: 20px;
  text-align: center;
}
.workspace-outer-main-container .lf-player-container {
  margin-top: -40px;
}
:root {
  --vend-side-popup-w: 44%;
}
@media (max-width: 610px) {
  :root {
    --vend-side-popup-w: 70%;
  }
}

.contacts-container {
  margin-top: 35px;
}
.contacts-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.contacts-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--header__color);
  margin: 0;
}
.contacts-count {
  background: #e2e8f0;
  color: #4a5568;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-top: 16px;
}
.contact-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.contact-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
  transform: translateY(-2px);
}
.contact-header {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.contact-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.contact-action-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-action-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}
.contact-details {
  padding: 20px 15px;
  background: var(--body__background);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}
.contact-detail-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--body__background);
  border-radius: 7px;
  border: 1px solid #ddd;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  min-width: 0;
}
.contact-detail-checkbox:hover {
  border-color: #b0b8c8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.contact-detail-checkbox img {
  flex-shrink: 0;
}
.checkbox-label {
  font-size: 12.5px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .contacts-container {
    padding: 16px;
  }
  .contacts-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-header {
    padding: 10px 12px;
  }

  .contact-details {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .contacts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .contact-details {
    grid-template-columns: 1fr;
  }

  .contact-action-btn {
    padding: 3px;
  }
}

.login-page {
  display: flex;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  position: relative;
}

.stacked-carousel-panel {
  height: 100%;
  flex-shrink: 0;
  width: 50%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.login-page::after {
  content: "";
  position: fixed;
  width: 160vw;
  height: 160vh;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(63, 23, 207, 0.5),
    rgba(63, 23, 207, 0.12),
    rgba(63, 23, 207, 0.02),
    transparent 30%
  );
  filter: blur(120px);
  transform: translate(-20%, -20%) rotate(0deg);
  animation: trailMove 18s ease-in-out infinite;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

[data-theme="light"] .login-page::after {
  opacity: 0.4;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(57, 22, 172, 0.4),
    rgba(57, 22, 172, 0.1),
    rgba(57, 22, 172, 0.02),
    transparent 30%
  );
}

@keyframes trailMove {
  0% {
    transform: translate(-15%, -20%) rotate(0deg);
  }
  50% {
    transform: translate(20%, 10%) rotate(25deg);
  }
  100% {
    transform: translate(-15%, -20%) rotate(0deg);
  }
}

.login-main-container {
  display: flex;
  flex: 1 1;
  min-width: 0;
  flex-direction: column;
  gap: 0;
  padding: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  justify-content: center;
  z-index: 10;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.login-main-container::-webkit-scrollbar {
  display: none;
}

.reset-password-main--with-errors {
  justify-content: flex-start;
  scrollbar-width: thin;
}

.reset-password-main--with-errors::-webkit-scrollbar {
  display: block;
  width: 8px;
}

.reset-password-main--with-errors::-webkit-scrollbar-thumb {
  background-color: rgba(104, 96, 238, 0.7);
  border-radius: 8px;
}

.reset-password-main--with-errors::-webkit-scrollbar-track {
  background-color: transparent;
}

.reset-password-main {
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: flex-start;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.reset-password-main::-webkit-scrollbar {
  display: block;
  width: 8px;
}

.reset-password-main::-webkit-scrollbar-thumb {
  background-color: rgba(104, 96, 238, 0.7);
  border-radius: 8px;
}

.reset-password-main::-webkit-scrollbar-track {
  background-color: transparent;
}

.reset-password-main .login-header {
  flex-shrink: 0;
  margin-bottom: 8px;
  margin-top: 15px;
}

.reset-password-main .login-container {
  flex-shrink: 0;
  gap: 10px;
}

.reset-password-main .forgot-title {
  font-size: 26px;
  margin: 0 0 4px;
}

.reset-password-main .forgot-subtitle {
  margin: 0;
  line-height: 1.4;
}

.reset-password-main .textfield-container {
  margin-bottom: 10px;
}

.reset-password-main .textfield-label {
  font-size: 14px;
  margin-bottom: 8px;
}

.reset-password-main .login-container input {
  padding: 10px 14px;
}

.reset-password-main .signup-options {
  margin-top: 8px;
}

.reset-password-main .resend-email {
  margin-top: 0;
}

.reset-password-main .forgot-signup-text {
  margin-top: 8px;
}

.login-container {
  border-radius: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.login-header {
  display: flex;
  width: 70%;
  justify-content: flex-start;
}

.input-container {
  display: flex;
  flex-direction: column;
  width: 70%;
}

.vylogo {
  width: 180px;
}

.login-container h2 {
  color: var(--header__color);
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0px;
}

.login-header-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 70%;
  margin-top: 16px;
  margin-bottom: 20px;
}

.login-header-text-container h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0px;
}

.eye-on,
.eye-off {
  width: 20px;
  display: flex;
  justify-content: center;
  margin: auto;
  padding-top: 16px;
}

.login-container h5 {
  cursor: pointer;
  color: var(--login__sideheading);
  font-weight: 400;
  padding: 0px 20px;
  text-align: right;
  margin: 0;
  display: flex;
  align-items: center;
}

.login-container h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color-accent);
  margin: 0;
}

.login-options {
  display: flex;
  justify-content: center;
  width: 100%;
}

.signup-options {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.login-background {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 16px;
  border-radius: 30px;
  z-index: 10;
}

[data-theme="dark"] {
  .login-background {
    background: linear-gradient(355deg, #131135 0%, #5850ce 100%);
  }
}

[data-theme="light"] {
  .login-background {
    background: linear-gradient(355deg, #322c8c 0%, #827af1 100%);
  }
}

.signup-background {
  background-color: #6860ee;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.check-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.check-container p {
  color: var(--signup__text);
  margin: 0;
}

.check-container span {
  text-decoration: underline;
}

.multiselect-check-container {
  margin-top: 0.5px !important;
}

.bg-image {
  width: 350px;
}

.slider-dots {
  margin-top: 20px;
}

.background-text {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.signup-text {
  margin-top: 20px;
  font-weight: 500;
  display: flex;
  gap: 6px;
}

.forgot-signup-text {
  margin-top: 20px;
  font-weight: 500;
  display: flex;
  gap: 6px;
}

.signup-text-span {
  color: var(--primary__color);
  font-weight: 500;
}

.signup-text-span:hover {
  text-decoration: underline;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}

.login-container input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border__color);
  border-radius: 12px;
  margin: 0;
}

.Login-with-Google {
  width: 369px;
  height: 30px;
  background: white;
  padding: 4px 10px;
  border: none;
  top: 15px;
  left: 227px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  cursor: pointer;
}

.Login-with-Google img {
  width: 25px !important;
  height: 25px;
  top: auto;
  left: auto;
  display: block;
  margin: 0;
  margin: initial;
  cursor: pointer;
  padding: 0px;
}

.Login-with-Google button.google-button {
  background: none;
  border: none;
  cursor: pointer;
}

.Login-with-Microsoft {
  width: 369px;
  height: 40px;
  background: white;
  padding: 0px 10px;
  border: none;
  top: 15px;
  left: 227px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 20px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-bottom: 30px;
}

.login-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Login-with-Microsoft img {
  width: 20px;
  height: 20px;
  top: auto;
  left: 14px;
  display: block;
  margin: 0;
  margin: initial;
  cursor: pointer;
  padding: 0px 0px 0px 14px;
}

.login-container h4 {
  margin-top: 10px;
}

.signup-container h4 {
  margin-top: 10px;
}

.Login-with-Microsoft button.google-button {
  background: none;
  border: none;
}

button.Microsoft-button {
  background: white;
  border: none;
  cursor: pointer;
}

.login-button {
  width: 386px;
  padding: 10px;
  margin-bottom: 10px;
  color: #f1efef;
  cursor: pointer;
  margin-top: 25px;
  border-radius: 5px;
  background: linear-gradient(147deg, #2b8fff 0%, #e510ff 100%);
  height: 42px;
  border: none;
  font-size: 16px;
  text-transform: capitalize;
}

.side-img {
  width: 100%;
}

.side-img.login-height {
  height: 100vh;
}

.side-img.signup-height {
  height: 110vh;
}

.text-on-image {
  position: absolute;
  left: 7%;
  top: 3%;
  color: white;
  width: 88%;
  font-size: 13px;
  font-weight: 100;
  letter-spacing: 1px;
  display: grid;
  align-content: stretch;
  justify-content: space-evenly;
  align-items: baseline;
  justify-items: start;
}

.horizontal-section-outer {
  display: flex;
  justify-content: center;
}

.horizontal-section-outer p {
  position: relative;
  color: var(--header__color);
}

.horizontal-section-outer p::before {
  position: absolute;
  content: "";
  width: 150px;
  height: 1px;
  background: var(--header__color);
  top: 9px;
  left: 33px;
}

.horizontal-section-outer p::after {
  position: absolute;
  content: "";
  width: 150px;
  height: 1px;
  background: var(--header__color);
  top: 9px;
  right: 33px;
}

.side-img img {
  height: 100%;
  width: 100%;
}

p.side-content-text {
  padding: 20px 0px 51px 0px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  position: static;
  line-height: 22px;
  width: 100%;
  height: 100%;
}

.error-message {
  color: red;
  font-size: 14px;
  flex-direction: column-reverse;
  align-content: stretch;
  margin: 0;
  margin-bottom: 30px;
}

.eye-icon {
  position: absolute;
  right: 10px;
  top: 37px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
}

.password-div {
  position: relative;
}

.login-page img.side-logo {
  width: 50%;
  height: auto;
  position: relative;
  top: 12px;
  left: 20%;
}

.forgot-content {
  display: flex;
  flex-direction: column;
  width: 70%;
}

.forgot-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: -8px;
}

.forgot-subtitle {
  font-size: 14px;
  color: #727277;
  line-height: 1.6;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #727277;
  font-size: 14px;
  font-weight: 500;
  width: -webkit-fit-content;
  width: fit-content;
  margin-bottom: 20px;
  margin-left: -260px;
}

.back-to-login {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #727277;
  font-size: 14px;
  font-weight: 500;
  width: 220px;
  margin-bottom: -10px;
}

.back-icon {
  width: 16px;
  height: 16px;
}

.resend-email {
  margin-top: 8px;
}

/* ── Short screens: compress left side vertical gaps ── */
@media screen and (max-height: 600px) {
  .login-main-container {
    padding: 15px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .login-container {
    gap: 10px;
  }

  .login-header {
    margin-bottom: 0;
  }

  .login-header-text-container {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .login-header-text-container h1 {
    font-size: 22px;
  }

  .login-container h4 {
    font-size: 13px;
  }

  .vylogo {
    width: 140px;
  }

  .signup-text {
    margin-top: 8px;
    margin-bottom: 6px;
    font-size: 13px;
  }
}

@media screen and (max-height: 500px) {
  .login-main-container {
    padding: 15px;
    justify-content: flex-start;
  }

  .login-container {
    gap: 8px;
  }

  .login-header-text-container {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .login-header-text-container h1 {
    font-size: 20px;
  }

  .vylogo {
    width: 120px;
  }

  .signup-text {
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────── */

/* ── Tablet landscape / small desktop: 769px–1140px ── */
@media only screen and (min-width: 769px) and (max-width: 1140px) {
  .vylogo {
    width: 160px;
  }

  .login-header,
  .login-header-text-container,
  .input-container,
  .forgot-content {
    width: 80%;
  }

  .login-options {
    width: 80%;
  }
}

/* ── Tablet portrait: 481px–768px ── */
@media screen and (max-width: 768px) {
  .login-page {
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  .login-main-container {
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 20px 15px;
    overflow-y: auto;
    justify-content: flex-start;
  }

  .login-container {
    width: 100%;
    height: auto;
    gap: 16px;
    padding: 0;
  }

  .login-header {
    width: 85%;
    justify-content: center;
    margin-top: 0;
  }

  .login-header-text-container {
    width: 85%;
    margin-top: 8px;
    margin-bottom: 8px;
    align-items: center;
  }

  .input-container {
    width: 85%;
  }

  .login-options {
    width: 85%;
    margin-top: 4px;
  }

  .login-options button {
    width: 100% !important;
  }

  .signup-text {
    margin-top: 12px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .bg-image {
    width: 260px;
  }

  .side-img {
    width: 100%;
    height: auto;
  }

  .login-page img.side-logo {
    width: 40%;
    left: 25%;
  }

  .login-container h4 {
    font-size: 14px;
  }
}

/* ── Mobile: ≤480px ── */
@media screen and (max-width: 480px) {
  .login-page {
    height: 100dvh;
    overflow: hidden;
  }

  .login-main-container {
    height: 100%;
    gap: 0;
    padding: 16px 12px;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
  }

  .login-container {
    width: 100%;
    height: auto;
    max-width: 420px;
    padding: 24px 16px;
    border-radius: 20px;
    gap: 16px;
  }

  .login-header {
    width: 90%;
    justify-content: center;
  }

  .login-header-text-container {
    width: 90%;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .input-container {
    width: 90%;
  }

  .login-options {
    width: 90%;
    margin-top: 4px;
  }

  .login-options button {
    width: 100% !important;
  }

  .signup-text {
    margin-top: 12px;
    margin-bottom: 12px;
    font-size: 14px;
  }

  .forgot-signup-text {
    margin-top: 8px;
    font-size: 13px;
    margin-bottom: 0;
  }

  .vylogo {
    width: 160px;
    margin-bottom: 0;
  }

  .login-button {
    width: 100%;
  }

  .Login-with-Google {
    width: 100%;
    max-width: 300px;
  }

  .Login-with-Microsoft {
    width: 100%;
    max-width: 300px;
  }

  .login-container h4 {
    font-size: 13px;
    margin-top: 0;
  }
}

/* ── Very small phones: ≤374px ── */
@media only screen and (max-width: 374px) {
  .login-page {
    height: 100dvh;
  }

  .login-main-container {
    padding: 12px 10px;
  }

  .login-container {
    padding: 20px 12px;
    gap: 14px;
  }

  .login-header {
    width: 92%;
    justify-content: flex-start;
  }

  .login-header-text-container {
    width: 92%;
  }

  .input-container {
    width: 92%;
  }

  .login-options {
    width: 92%;
  }

  .vylogo {
    width: 150px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .login-container h1 {
    font-size: 22px;
  }

  .login-container h4 {
    font-size: 11px;
  }

  .signup-text {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .forgot-signup-text {
    margin-top: 0;
    font-size: 12px;
  }

  .textfield-label {
    font-size: 13px;
    font-weight: 600;
    width: -webkit-fit-content;
    width: fit-content;
    margin-bottom: 12px;
  }

  .textfield-container {
    margin-top: -8px;
  }
}

/* ── Tablet portrait only (481–768): ensure no margin-top offset ── */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .login-header {
    margin-top: 0;
    justify-content: center;
  }
}

/* ── Forgot password ── */
@media only screen and (max-width: 480px) {
  .forgot-content {
    width: 90%;
    margin-top: 0;
  }
}

@media only screen and (min-width: 769px) and (max-width: 950px) {
  .forgot-content {
    margin-top: 30px;
  }
}

/* ── Medium-range: 800–1050px ── */
@media only screen and (min-width: 800px) and (max-width: 1050px) {
  p.side-content-text {
    font-size: 12px;
  }
}

/* ── Large screens: 1601–1800px ── */
@media only screen and (min-width: 1601px) and (max-width: 1800px) {
  .text-on-image { font-size: 15px; }
  .learn-more { font-size: 15px; }
  p.side-content-text { font-size: 16px; }
  .login-container h5 { font-size: 15px; }
  .login-container h2 { font-size: 25px; }
  .login-container h4 { font-size: 18px; }
  .login-container input { padding: 15px; font-size: 15px; width: 98%; }
  .login-button { font-size: 18px; padding: 12px; height: 44px; }
  .Login-with-Google button.google-button { font-size: 15px; height: 32px; }
  button.Microsoft-button { font-size: 15px; height: 32px; }
}

/* ── XL screens: 1801–2000px ── */
@media only screen and (min-width: 1801px) and (max-width: 2000px) {
  .text-on-image { font-size: 17px; }
  .learn-more { font-size: 17px; }
  p.side-content-text { font-size: 18px; }
  .login-container h5 { font-size: 17px; }
  .login-container h2 { font-size: 27px; }
  .login-container h4 { font-size: 20px; }
  .login-container input { padding: 16px; font-size: 17px; width: 97%; }
  .login-button { font-size: 20px; height: 46px; }
  .Login-with-Google button.google-button { font-size: 17px; height: 34px; }
  button.Microsoft-button { font-size: 17px; height: 34px; }
}

/* ── 2K+ screens: 2001–2645px ── */
@media only screen and (min-width: 2001px) and (max-width: 2645px) {
  .bg-image { width: 450px; }
  .background-text { font-size: 25px; }
  .login-container h4 { font-size: 27px; }
  .login-container input { padding: 12px; font-size: 22px; }
  .login-options button { font-size: 28px; }
  .signup-text { font-size: 25px; }
  .forgot-signup-text { font-size: 25px; }
  .login-container h1 { font-size: 50px; }
}

@media only screen and (min-width: 2000px) and (max-width: 2650px) {
  .forgot-subtitle {
    font-size: 27px;
    color: #727277;
    line-height: 1.6;
  }
}

.login-container .Toogle-button {
  margin-top: -1vw;
}

/* Onboarding.css */

.onboarding-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: var(--body__background);
  color: var(--header__color);
  overflow: hidden;
  position: relative;
}

.onboarding-header {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.onboarding-logo {
  width: 180px;
  height: auto;
}

.carousel-container {
  flex: 1 1;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.carousel-slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.carousel-slides .carousel-slide:nth-child(1) {
    padding: 0px;
  }
  
  .carousel-slides .carousel-slide:nth-child(2) {
    padding: 0 40px;
  }
  
  .carousel-slides .carousel-slide:nth-child(3) {
    padding: 0px;
  }

.slide-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.slide-image {
  width: 70%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

.slide-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.slide-description {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
  margin-bottom: 30px;
  padding: 0px 10px;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  gap: 8px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.indicator.active {
  background-color: #6860EE;
  width: 20px;
  border-radius: 4px;
}

.onboarding-footer {
  padding: 20px;
  margin-bottom: 40px;
}

.get-started-button {
  width: 100%;
  padding: 15px;
  background-color: #6860EE;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.get-started-button:hover {
  background-color: #5750d9;
}

/* Only show on mobile screens */
@media (min-width: 481px) {
  .onboarding-container {
    display: none;
  }
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(data:image/gif;base64,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) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot);
    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot?#iefix) format('embedded-opentype'), url(/static/media/slick.295183786cd8a1389865.woff) format('woff'), url(/static/media/slick.c94f7671dcc99dce43e2.ttf) format('truetype'), url(/static/media/slick.2630a3e3eab21c607e21.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/* Main Signup Page Css */
.signup-icon-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.signup-welcome-container {
  width: 100%;
  text-align: center;
  color: var(--login__container_header);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-welcome-container h2 {
  font-size: 28px;
  font-weight: 600;
}

.signup-welcome-container span {
  font-size: 16px;
  font-weight: 500;
}

.signup-progress-bar {
  padding: 10px;
}

.step-counter {
  font-size: 14px;
  font-weight: 600;
  color: #5c40d1;
  text-align: center;
}

.signup-purpose-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  grid-column-gap: 10px;
  column-gap: 10px;
}

/* Account Page Css */
.separator-container {
  display: flex;
  align-items: center;
  margin: 30px 0;
  width: 100%;
}

.separator-line {
  flex: 1 1;
  height: 1px;
  background-color: #ddd;
}

.separator-text {
  padding: 0 15px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.signup-header-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.signup-outer-main-container {
  border: 1px solid var(--card__border);
  padding: 25px;
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  margin-bottom: 10px;
  background-color: var(--card__background);
  margin: 15px;
}

.user-join-page-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.signup-header-texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.signup-header-texts h2 {
  font-size: 20px;
}

.role-text-content h3 {
  font-size: 18px;
  font-weight: 500;
}
/* .signup-main-header {
  margin-bottom: 0;
  margin-top: 0;
} */
.signup-fields-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  grid-column-gap: 30px;
  column-gap: 30px;
}

.signup-fields-section .textfield-input-container input {
  color: var(--text-color);
  background-color: var(--card__background);
  box-shadow: 0 0 0 30px var(--card__background) inset !important;
}

.signup-fields-section .react-tel-input .form-control {
  box-shadow: 0 0 0 30px var(--card__background) inset !important;
}

.signup-fields-section .react-tel-input .selected-flag {
  background-color: var(--card__background) !important;
}

@media (max-width: 630px) {
  .signup-fields-section {
    grid-template-columns: 1fr;
  }
}

.stepper-render-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.signup-side-text {
  color: var(--text-color-accent);
  font-size: 16px;
}

.signup-button-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.join-button-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px
}

.select-role-outer-container {
  border: 1px solid var(--border__color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  transition: all 0.3s ease;
}

.select-role-outer-container:hover {
  border-color: #6860ee;
}

.selected-role {
  border: 1px solid #6860ee;
  background-color: rgba(104, 96, 238, 0.1);
}

.role-text-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.add-team-member-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.add-team-text-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.signup-invide-team-section {
  border: 1px solid var(--border__color);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 15px;
}

.add-team-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  gap: 5px;
  grid-column-gap: 20px;
  column-gap: 20px;
}

.signup-outer-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  height: auto;
  gap: 0px;
  padding: 20px 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

[data-theme="dark"] .signup-outer-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/static/media/signup-bg-dark.403ccda4b778e9500455.svg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.045;
  z-index: -1;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

[data-theme="light"] .signup-outer-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/static/media/signup-bg-light.7c1dcef921ce8e13bc53.svg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.025;
  z-index: -1;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}


.select-signup-outer-main-container {
  border: 1px solid var(--card__border);
  padding: 25px;
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  margin: 15px;
  background-color: var(--card__background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.select-signup-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.select-signup-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.signup-completion-outer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signup-completion-outer-container {
  position: relative;
}

.signup-completion-outer-container::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url(/static/media/vybogtal-background-img.b1701d80699bbf687597.png);
  top: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  animation: bounce-slow 3s ease-in-out infinite;
}

.signup-completion-text-container {
  text-align: center;
  margin-top: -20px;
}

@keyframes bounce-slow {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-22px);
  }

  100% {
    transform: translateY(0);
  }
}

@media only screen and (min-width: 320px) and (max-width: 375px) {

  .signup-icon-text img {
    width: 40%;
  }  

  .signup-side-text {
    font-size: 15px;
  }

  .signup-header-section img{
    width: 8%;
  }

  .select-role-outer-container  img {
    width: 8%;
  }

  .select-signup-outer-main-container {
    border: 1px solid var(--border__color);
    padding: 16px;
    border-radius: 16px;
    width: 95%;
    max-width: 100%;
    margin-bottom: 10px;
    background-color: var(--card__background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  .signup-welcome-container {
    width: 100%;
    text-align: center;
    color: var(--login__container_header);
  }

  .signup-welcome-container h2 {
    font-size: 20px;
  }

  .signup-welcome-container span {
    font-size: 13px;
  }

  .signup-header-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .signup-main-header {
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 0;
  }

  .signup-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -5px;
  }

  .select-role-outer-container {
    border: 1px solid var(--border__color);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    transition: all 0.3s ease;
    font-size: 15px;
  }

}

@media only screen and (min-width: 375px) and (max-width: 424px) {

  .vy-labs-logo {
    width: 200px;
  }

  .signup-header-section img{
    width: 8%;
  }

  .select-role-outer-container  img {
    width: 8%;
  }

  .signup-main-header {
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 0;
  }

  .signup-welcome-container h2 {
    font-size: 22px;
  }

  .select-signup-outer-main-container {
    border: 1px solid var(--border__color);
    padding: 20px;
    border-radius: 16px;
    width: 95%;
    max-width: 100%;
    margin-bottom: 10px;
    background-color: var(--card__background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

}

@media only screen and (min-width: 425px) and (max-width: 768px) {

  .vy-labs-logo {
    width: 200px;
  }

  .signup-header-section img{
    width: 7%;
  }

  .select-role-outer-container  img {
    width: 7%;
  }

  .select-signup-outer-main-container {
    border: 1px solid var(--border__color);
    padding: 25px;
    border-radius: 16px;
    width: 90%;
    max-width: 100%;
    margin-bottom: 10px;
    background-color: var(--card__background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  .signup-main-header {
    margin-bottom: 0;
    margin-top: 0;
  }

  .signup-outer-main-container {
    max-width: 600px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {

  .vy-labs-logo {
    width: 200px;
  }

  .signup-header-section img{
    width: 5%;
  }

  .select-role-outer-container  img {
    width: 5%;
  }

  .select-signup-outer-main-container {
    width: 85%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  .signup-main-header {
    margin-bottom: 0;
    margin-top: 0;
  }

  .signup-outer-main-container {
    max-width: 700px;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  .vy-labs-logo {
    width: 220px;
  }
  /* .select-role-outer-container  img {
    width: 6%;
  } */

  .signup-header-section img{
    width: 44px;
  }

  .select-role-outer-container  img {
    width: 44px;
  }

  .select-signup-outer-main-container {
    padding: 24px;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
  }

    .signup-main-header {
      margin-bottom: 0;
      margin-top: 0;
    }

    .signup-outer-main-container {
      max-width: 800px;
    }
}

@media only screen and (min-width: 1441px) and (max-width: 2000px) {
  .vy-labs-logo {
    width: 220px;
  }

  .signup-header-section img{
    width: 4%;
  }

  .select-role-outer-container  img {
    width: 4%;
  }

  .signup-side-text {
    font-size: 15px;
  }

  .select-signup-outer-main-container {
    border: 1px solid var(--card__border);
    padding: 25px;
    border-radius: 16px;
    width: 90%;
    background-color: var(--card__background);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .signup-main-header {
    margin-bottom: 0;
    margin-top: 0;
  }

  .signup-outer-main-container {
    max-width: 900px;
  }

}

@media only screen and (min-width: 2001px) and (max-width: 2570px) {

  .vy-labs-logo {
    width: 240px;
  }

  .signup-header-section img{
    width: 4%;
  }

  .select-role-outer-container  img {
    width: 4%;
  }

  .know-about-us-title{
    margin-top: -10;
  }

  .signup-main-header {
    font-size: 30px;
  }

  .signup-side-text {
    font-size: 25px;
  }

  .select-signup-outer-main-container {
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .signup-main-header {
    margin-bottom: 0;
    margin-top: 0;
  }

  .signup-outer-main-container {
    max-width: 1200px;
  }

}
.otp-container {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
  background: var(--body__background);
  border-radius: 10px;
  width: 100%;
}

h2.otp-heading {
  margin: 0;
  text-align: center;
  color: #5c40d1;
}
span.otp-email {
  color: #6860ee;
  font-size: 16px;
  font-weight: 700;
}

.client-cards-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
  grid-gap: 20px;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  /* padding: 25px; */
}
@media (max-width: 1190px) {
  .client-cards-container {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    /* padding: 25px; */
  }
}
@media (max-width: 768px) {
  .client-cards-container {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: 1fr;
    /* padding: 25px; */
  }
}
img.client-header-card-icon {
  width: 25px;
  height: 25px;
}
img.client-inner-card-icon {
  width: 20px;
  height: 20px;
}
span.client-contact-text {
  font-size: 14px;
  font-weight: 400;
}
.client-contact {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
  margin-bottom: 15px;
}

.client-card {
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  /* border: 1px solid var(--client_card_border); */
  border: 1px solid var(--border__color);
  /* background-color: var(--client_card_background); */
  width: 100%;
  height: 100%;
}

.client-card-header {
  border-bottom: 1px solid var(--border__color);
  /* margin-bottom: 12px; */
  padding: 10px;
  /* background: var(--client_card_linear); */
  border-radius: 12px 12px 0px 0px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.client-details-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.edit-icon-container {
  cursor: pointer;
  /* background-color: var(--body__background); */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid #e0e0e0;
}

.edit-icon-container:hover {
  background-color: #efe9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(104, 96, 238, 0.2);
}

.edit-icon {
  width: 18px;
  height: 18px;
}

.client-card.dark-mode .client-card-header {
  border-bottom-color: #4a5568;
}

.client-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3748;
}

.client-card.dark-mode .client-name {
  color: #ffffff;
}

.client-industry {
  font-size: 14px;
  color: #4a5568;
  margin-top: 4px;
}

.client-card.dark-mode .client-industry {
  color: #a0aec0;
}

.client-card-body {
  /* margin-bottom: 16px; */
  padding: 1px 12px;
  margin-top: 12px;
  /* background-color: var(--client_card_background); */
}

.contact-icon,
.website-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

h5.client-contact-header {
  margin-bottom: 0px;
}

.client-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  /* background-color: var(--client_card_background); */
  border-radius: 12px;
}
.container {
  display: flex;
  /* height: 100vh; */
  background-color: var(--body__background);
  border: 1px solid var(--border__color);
  margin: 2.5vw;
  border-radius: 16px;
  position: relative;
  z-index: 0;
  min-height: 470px;
  width: 95%;
}
.setting-header-container {
  padding: 0px 20px;
  border-bottom: 1px solid var(--border__color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: var(--body__background);
}

.setting-header-container h2 {
  margin: 14px 0px;
}

.settings-title-container {
  display: flex;
  flex-direction: column;
  margin: 10px 0px 20px 0px;
}

.settings-title-container h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 5px 0px;
}

.settings-title-container p {
  font-size: 16px;
  font-weight: 500;
  margin: 5px 0px;
  color: var(--text-color-accent);
}

img.settings-icon {
  width: 24px;
}
.back-to-lookbook {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

img.back-icon {
  width: 24px;
  cursor: pointer;
}

span.back-text {
  color: #6860EE;
  font-weight: 500;
  cursor: pointer;
}
.sidebar {
  width: 20%;
  background-color: var(--sidenav-background);
  border-right: 1px solid var(--border__color);
  border-radius: 16px 0 0 16px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 10px;
}

.sidebar .tab {
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .tab:not(.active):hover {
  background-color: var(--account_Tab_Hover);
}

.sidebar .active {
  font-weight: 600;
  color: #6860ee;
}

[data-theme="light"]{
  .sidebar .active {
  background-color: #EEEDFF;
  color: #6860ee;
}
}

[data-theme="dark"]{
  .sidebar .active {
  background-color: #2d2d2d;
  color: #fff;
}
}

img.plan-details-icon {
  width: 19px;
}
img.invoice-date-icon {
  width: 2.5%;
}
img.account-dark-icons {
  width: 18px;
}
.content-area {
  width: 80%;
  padding: 10px 30px;
  overflow-x: hidden;
}
/* .subscription-content {
  margin: 30px 0;
} */
.content {
  max-width: 800px;
  margin: 0 auto;
}
.fields-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  column-gap: 30px;
  grid-row-gap: 20px;
  row-gap: 20px;
}

.button-container {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 25px;
}

.integration-button-container {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 25px;
  margin-bottom: 1em;
}

/* -------------------------------------------- */
/* /Profile-details-page-css */
.profile-main-details-container
  .MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault.css-nbljvh-MuiAvatar-root {
  width: 60px;
  height: 60px;
}
.profile-main-details-container
  span.MuiBadge-badge.MuiBadge-standard.MuiBadge-anchorOriginBottomRight.MuiBadge-anchorOriginBottomRightCircular.MuiBadge-overlapCircular.css-p8ud25-MuiBadge-badge {
  cursor: pointer;
}
.profile-main-details-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border__color);
  padding: 15px;
  border-radius: 12px;
}
.profile-main-details-container .user-name {
  margin: 0;
}

.profile-main-details-container .user-email {
  color: #898989;
}
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
img.banner-upload-icon {
  width: 10%;
  height: 13%;
}
.timezone-dialog-content {
    padding: 10px;
    margin: 10px;
}
.profile-image-container {
  border: 2px dotted #6665ea;
  padding: 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  margin: 20px;
}

.info-container {
  text-align: center;
  color: #818181;
  margin-bottom: 25px;
  margin-top: 15px;
}

span.upload-text {
  margin-bottom: 12px;
}
.preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

img.preview-image {
  border: 1px solid var(--border__color);
  border-radius: 50%;
  width: 30%;
  margin-bottom: 12px;
}
.change-password-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vw;
}
.password-field-container {
  width: 49%;
}
.passwords-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  row-gap: 20px;
  grid-column-gap: 20px;
  column-gap: 20px;
}
h2.change-password-title {
  margin-top: 0px;
  margin-bottom: 20px;
}
.personal-details-container {
  border: 1px solid var(--border__color);
  padding: 20px;
  margin-top: 20px;
  border-radius: 12px;
}
.personal-details-inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.heading-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border__color);
  margin-bottom: 20px;
  padding: 0px 0px 12px 0px;
}

.heading-container h3 {
  margin: 0;
}
.change-password-title-container {
  border-bottom: 1px solid var(--border__color);
  margin-bottom: 10px;
}
.change-password-container {
  border: 1px solid var(--border__color);
  padding: 20px;
  margin-top: 20px;
  border-radius: 16px;
}
.header-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.personal-details-inner {
  padding: 10px 20px;
}

label.personal-details-label {
  color: var(--text-color-accent);
  font-weight: 600;
}

.personal-details-container h4{
  margin-top: 10px;
}

@media screen and (max-width: 900px) {
  .profile-main-details-container {
    flex-direction: column;
    gap: 20px;
    align-items: baseline;
  }
}
@media screen and (max-width: 800px) {
  .personal-details-container {
    grid-template-columns: 1fr;
  }
  .sidebar {
    width: 150px;
  }
}
@media screen and (max-width: 800px) {
  .content-area {
    padding: 20px;
  }
}
/* ---------------------------------------- */

/* Subscripition page css */
:root {
  --primary-fw: 700;
  --primary-fs: 15px;
  --primary-linear-gradient: hsl(298, 97%, 46%), hsl(237, 63%, 64%);
  --neutral-very-light-grayish-blue: hsl(240, 78%, 98%);
  --neutral-light-grayish-blue: hsl(234, 14%, 74%);
  --neutral-grayish-blue: hsl(233, 13%, 49%);
  --neutral-dark-grayish-blue: hsl(232, 13%, 33%);
  --neutral-white: hsl(0, 0%, 100%);
}

.PricingApp {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  /* font-family: "Montserrat", sans-serif; */
  font-weight: 700;
  font-weight: var(--primary-fw);
  font-size: 15px;
  font-size: var(--primary-fs);
  display: grid;
  place-items: center;
  /* background-color: var(--neutral-very-light-grayish-blue); */
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 375px 658px;
  z-index: 999;
}

.PricingApp::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 353px;
  width: 100%;
  height: 304px;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

button {
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-weight: var(--primary-fw);
  font-size: 15px;
  font-size: var(--primary-fs);
}

.PricingApp .price-switch {
  --border-radius: 10em;
  display: block;
  width: 50px;
  height: 25px;
  border-radius: var(--border-radius);
  position: relative;
  cursor: pointer;
}

.PricingApp .price-checkbox {
  opacity: 0;
  height: 0;
  width: 0;
}

.PricingApp .switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 25px;
  border-radius: var(--border-radius);
  background-image: linear-gradient(to right, hsl(298, 97%, 46%), hsl(237, 63%, 64%));
  background-image: linear-gradient(to right, var(--primary-linear-gradient));
}

.PricingApp .switch-slider:is(:hover, :focus-visible) {
  opacity: 0.7;
}

.PricingApp .switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 20px;
  border-radius: 50%;
  aspect-ratio: 1;
  background-color: hsl(240, 78%, 98%);
  background-color: var(--neutral-very-light-grayish-blue);
  transform: translateX(calc(100% + 2px));
  transition: 0.3s ease;
}

.PricingApp .price-checkbox:checked + .switch-slider::before {
  transform: translateX(0%);
}
/*------*/

.PricingApp .app-container {
  width: min(90%, 70rem);
  margin-top: -6em;
}

.PricingApp header .header-topic {
  text-align: center;
  color: hsl(232, 13%, 33%);
  color: var(--neutral-dark-grayish-blue);
  margin-top: 1.5em;
}

.PricingApp header > .header-row {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
}

.PricingApp .pricing-cards {
  /* margin-top: 4em; */
  min-height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

@media screen and (max-width: 800px) {
  .PricingApp {
    padding-block: 4em;
  }
  .PricingApp .pricing-cards {
    flex-direction: column;
    gap: 2em;
  }
}

.notification-li {
  margin-bottom: 20px;
}

.checkbox-contanier {
  display: flex;
  gap: 30px;
  margin-top: 2em;
}

.api-integration-guidelines {
  border: 1px solid #efefef;
  padding: 10px;
  border-radius: 5px;
  background: #f0f0fe;
}

.sub-header {
  color: #2f37e7e0;
}

.api-details-list {
  list-style-type: none;
  padding: 0;
  margin-top: 1.5rem;
}

.api-details-list li {
  display: flex;
  align-items: flex-start;
  background-color: #f9f9f9;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border-left: 4px solid #6a68fb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.api-details-list li:not(:last-child) {
  margin-bottom: 1rem;
}

.api-details-list li strong {
  color: #6a68fb;
}

.api-details-list li em {
  font-style: italic;
  color: #333;
}

.api-details-list li .icon {
  font-size: 1.5rem;
  color: #6a68fb;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
}

.api-details-list li p {
  margin: 0;
  color: #333;
}

.api-details-list li p {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

/* Documentation Tab Design */

.documentation-section {
  margin-bottom: 25px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.documentation-section h3 {
  font-size: 1.3em;
  color: #6a68fb;
}

.documentation-section h4 {
  font-size: 1.2em;
  color: #666;
}

.documentation-section p {
  font-size: 1em;
  color: #444;
  line-height: 1.6;
}

.code-block {
  background-color: #f3f3f3;
  border-left: 4px solid #6a68fb;
  padding: 10px;
  color: #333;
  /* font-family: Consolas, "Courier New", monospace; */
  overflow-x: auto;
  white-space: pre;
  border-radius: 4px;
}

.outer-select-container {
  padding: 10px;
  border-radius: 5px;
  background: #efefef;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  column-gap: 10px;
  margin-bottom: 1em;
}

span.option-selector {
  padding: 5px 9em;
  border-radius: 5px;
  cursor: pointer;
}

.active-option-selector {
  border: 1px solid rgb(231, 229, 229);
  background-color: white;
  color: black;
}
.request-samples-container {
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.section-title {
  font-size: 1.5rem;
  color: #6a68fb;
  margin-bottom: 1rem;
}

.intro-text {
  margin-bottom: 2rem;
  font-size: 1rem;
  color: #555;
}

.sample-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.sample-card {
  width: 40%;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.sample-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.language-icon {
  font-size: 2rem;
  color: #6a68fb;
  margin-right: 0.5rem;
}

.sample-card h4 {
  font-size: 1.2rem;
  color: #333;
}

.sample-card-content {
  font-size: 0.9rem;
  color: #666;
}
/* -------------------------------------------- */
/* /Members-Page */

.share-link-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invite-member-popup {
  padding: 20px;
  margin-bottom: -15px;
}
.member-role-change-popup {
  padding: 50px 20px;
  margin-bottom: -30px;
}
.member-upper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border__color);
}

.member-search-container {
  flex-shrink: 0;
}

.member-title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.member-header-description {
  margin: 0;
  margin-top: -20px;
  color: #8a94a6;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.member-header-search {
  position: relative;
  width: min(300px, 32vw);
}

.logout-animation-member {
  height: 50vh;
  width: 500px;
}
.member-buttons {
  display: flex;
  gap: 10px;
}
.member-button-container {
  display: flex;
  justify-content: flex-end;
}
.filter-stages-btn.is-filtered {
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.22);
}

.member-stage-filter-popup {
  position: fixed !important;
  top: 80px;
  right: 44px;
  z-index: 1300;
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
}

.member-stage-filter-select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border__color);
  border-radius: 6px;
  outline: none;
  background: var(--body__background);
  color: var(--header__color);
  font-size: 13px;
  font-weight: 600;
}

.member-stage-filter-select:focus {
  border-color: #6860ee;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.12);
}

@media screen and (max-width: 900px) {
  .member-upper-container {
    align-items: flex-start;
    flex-direction: column;
  }

  .member-search-container {
    width: 100%;
    flex-wrap: wrap;
  }

  .member-header-search {
    flex: 1 1;
    min-width: 220px;
    width: auto;
  }
}

/* Public career portal */
.career-portal-share-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 18px 24px;
}

.career-portal-share-header {
  margin-bottom: 28px;
}

.career-portal-share-header h3 {
  margin: 0 0 8px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.career-portal-share-header p {
  margin: 0;
  color: #697386;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.career-portal-actions-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.career-portal-url-box {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #e4e7ee;
  border-radius: 10px;
  background: #fbfcff;
  padding: 0 14px;
  color: #7b8496;
  font-size: 12px;
  font-weight: 500;
}

.career-portal-url-box span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.career-portal-url-box strong {
  flex: 0 0 auto;
  color: #222836;
  font-weight: 700;
}

.career-portal-copy-button,
.career-portal-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border-radius: 10px;
  padding: 0 16px;
  border: 1px solid #dfe3eb;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.career-portal-copy-button {
  background: #ffffff;
  color: #2c3342;
}

.career-portal-open-button {
  border-color: #6657f6;
  background: #6657f6;
  color: #ffffff;
}

.career-portal-copy-button svg,
.career-portal-open-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.career-portal-copy-button:disabled,
.career-portal-open-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.career-portal-copy-button:not(:disabled):hover,
.career-portal-open-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.career-portal-usage-box {
  border: 1px solid #e3e6ed;
  border-radius: 10px;
  background: #f8f9fc;
  padding: 14px 18px;
}

.career-portal-usage-box h4 {
  margin: 0 0 10px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.career-portal-usage-box p {
  margin: 0 0 6px;
  color: #697386;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.career-portal-usage-box p:last-child {
  margin-bottom: 0;
}

.career-portal-updated-time {
  margin: 18px 0 0;
  color: #7b8496;
  font-size: 11px;
  font-weight: 500;
}

.career-portal-embed-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  background: #ffffff;
  padding: 24px 30px;
}

.career-portal-embed-header h3 {
  margin: 0 0 12px;
  color: #1f2937;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.career-portal-embed-header p {
  max-width: 720px;
  margin: 0 0 10px;
  color: #697386;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.career-portal-embed-code-container {
  width: 100%;
}

.career-portal-code-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
  min-height: 58px;
  margin: 8px 0 10px;
  border: 1px solid rgba(104, 96, 238, 0.72);
  border-radius: 18px;
  background: #eeedff;
  color: #252b42;
  cursor: default;
  font-size: 18px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(104, 96, 238, 0.14);
}

.career-portal-code-tab span {
  color: #6860ee;
  font-family: Consolas, "Courier New", monospace;
  font-size: 18px;
  font-weight: 700;
}

.career-portal-embed-code-box {
  position: relative;
  min-height: 260px;
  box-sizing: border-box;
  overflow-x: auto;
  border: 1px solid #dfe3eb;
  border-radius: 18px;
  background: #fbfcff;
  padding: 24px 60px 24px 24px;
  color: #4d5a73;
  font-family: Consolas, "Courier New", monospace;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.65;
}

.career-portal-embed-code-box code {
  display: block;
  white-space: pre;
  color: inherit;
}

.career-portal-code-copy-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.career-portal-code-copy-icon img {
  width: 20px;
  height: 20px;
}

.career-portal-code-copy-icon:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

[data-theme="dark"] .career-portal-share-card {
  border-color: var(--border__color);
  background: var(--body__background);
}

[data-theme="dark"] .career-portal-embed-card {
  border-color: rgba(255, 255, 255, 0.28);
  background: #050609;
}

[data-theme="dark"] .career-portal-share-header h3,
[data-theme="dark"] .career-portal-embed-header h3,
[data-theme="dark"] .career-portal-usage-box h4,
[data-theme="dark"] .career-portal-url-box strong {
  color: var(--header__color);
}

[data-theme="dark"] .career-portal-share-header p,
[data-theme="dark"] .career-portal-embed-header p,
[data-theme="dark"] .career-portal-usage-box p,
[data-theme="dark"] .career-portal-updated-time,
[data-theme="dark"] .career-portal-url-box {
  color: var(--text-color-accent);
}

[data-theme="dark"] .career-portal-url-box,
[data-theme="dark"] .career-portal-usage-box,
[data-theme="dark"] .career-portal-copy-button {
  border-color: var(--border__color);
  background: var(--sidenav-background);
}

[data-theme="dark"] .career-portal-copy-button {
  color: var(--header__color);
}

[data-theme="dark"] .career-portal-code-tab {
  border-color: rgba(104, 96, 238, 0.72);
  background: linear-gradient(180deg, #191a3b 0%, #111229 100%);
  color: #ffffff;
}

[data-theme="dark"] .career-portal-code-tab span {
  color: #c9c6ff;
}

[data-theme="dark"] .career-portal-embed-code-box {
  border-color: rgba(255, 255, 255, 0.28);
  background: #050609;
  color: #aeb8e8;
}

[data-theme="dark"] .career-portal-code-copy-icon {
  border-color: rgba(255, 255, 255, 0.14);
  background: #151722;
}

@media (max-width: 768px) {
  .api-details-list li {
    flex-direction: column;
  }

  .api-details-list li .icon {
    margin-bottom: 0.5rem;
  }

  .container {
    flex-direction: column;
  }

  .sidebar {
    width: auto;
    flex-direction: row;
  }

  .sidebar .active {
    background-color: var(--body__background);
    font-weight: bold;
    border-bottom: 2px solid #3134b5;
    border-radius: 0;
  }

  .content-area {
    width: auto;
    padding: 0px 20px 20px 20px;
  }

  .career-portal-share-card {
    padding: 16px;
  }

  .career-portal-embed-card {
    padding: 18px 16px;
  }

  .career-portal-embed-header h3 {
    font-size: 18px;
  }

  .career-portal-embed-header p,
  .career-portal-embed-code-box {
    font-size: 14px;
  }

  .career-portal-code-tab {
    width: 100%;
    min-width: 0;
  }

  .career-portal-actions-row {
    grid-template-columns: 1fr;
  }

  .career-portal-copy-button,
  .career-portal-open-button {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .logout-animation-member {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .personal-details-inner-container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 425px) and (max-width: 768px) {
  .sidebar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .password-field-container {
    width: 100%;
  }

  .passwords-field-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.personal-details-inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}
.personal-details-inner-container.edit-mode {
  grid-template-columns: 1fr 1fr;
}
.personal-details-inner {
  display: contents;
}

.billings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.plan-header-3d {
  background: linear-gradient(135deg, var(--primary__color) 0%, #8b85f5 100%);
  color: white;
  padding: 10px 30px;
  border-radius: 20px 20px 0 0;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-header-3d::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translateZ(-50px);
  pointer-events: none;
}

.plan-header-3d::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: translateZ(-30px);
  pointer-events: none;
}

.plan-badge-3d {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: translateZ(20px);
}

.plan-title-3d {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateZ(30px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-description-3d {
  opacity: 0.9;
  margin-bottom: 25px;
  font-size: 1.1rem;
  transform: translateZ(20px);
  line-height: 1.6;
}
.billing-cards-3d {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 30px;
}

.billing-card-3d {
  background: var(--cards-background);
  border: 1px solid var(--cards-border);
  border-radius: 0 0 20px 20px;
  padding: 30px;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.billing-card-3d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary__color), #8b85f5);
}

.billing-card-3d:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 15px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.card-header-3d {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  transform: translateZ(20px);
}

.card-icon-3d {
  padding: 12px;
  background: linear-gradient(135deg, var(--primary__color), #8b85f5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(104, 96, 238, 0.3);
  transform: translateZ(30px);
}

.card-icon-3d svg,
.card-icon-3d img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.card-header-3d h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--header__color);
  margin: 0;
}

.pricing-section-3d {
  transform: translateZ(15px);
}

.pricing-3d {
  font-size: 3rem;
  font-weight: 800;
  color: var(--header__color);
  margin: 20px 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.currency-3d {
  font-size: 1.5rem;
  color: var(--primary__color);
  font-weight: 700;
}

.period-3d {
  font-size: 1.2rem;
  color: var(--job-Description_Color);
  font-weight: 500;
  margin-left: 5px;
}

.billing-details-3d {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.billing-item-3d {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border__color);
}

.billing-item-3d:last-child {
  border-bottom: none;
}

.billing-item-3d span:first-child {
  color: var(--job-Description_Color);
  font-weight: 500;
}

.billing-item-3d strong {
  color: var(--header__color);
  font-weight: 600;
}

.status-badge-3d {
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateZ(10px);
}

.status-active-3d {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
}

.status-trialing-3d {
  background: linear-gradient(135deg, #ed8936, #dd6b20);
  color: white;
}

.features-grid-3d {
  display: grid;
  grid-gap: 15px;
  gap: 15px;
  margin-top: 20px;
}

.feature-item-3d {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: var(--subscription_Plan_Background);
  border-radius: 15px;
  border: 1px solid var(--cards-border);
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}

.feature-item-3d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary__color), #8b85f5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-item-3d:hover {
  transform: translateX(5px) translateZ(10px);
  background: var(--tab__background);
}

.feature-item-3d:hover::before {
  opacity: 1;
}

.feature-icon-3d {
  width: 40px;
  height: 40px;
  padding: 8px;
  background: var(--body__background);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateZ(20px);
}

.feature-info-3d {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  transform: translateZ(15px);
}

.feature-value-3d {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--header__color);
  margin-bottom: 4px;
}

.feature-label-3d {
  font-size: 0.9rem;
  color: var(--job-Description_Color);
  font-weight: 500;
}

.usage-progress-3d {
  margin-top: 10px;
  transform: translateZ(10px);
}

.progress-bar-3d {
  height: 8px;
  background: var(--Skeleton__Background);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill-3d {
  height: 100%;
  background: linear-gradient(90deg, var(--primary__color), #8b85f5);
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill-3d::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.usage-text-3d {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--job-Description_Color);
  margin-top: 6px;
  font-weight: 500;
}

.billing-period-3d {
  transform: translateZ(15px);
}

.period-dates-3d {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.date-item-3d {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: var(--subscription_Plan_Background);
  border-radius: 12px;
  border: 1px solid var(--cards-border);
}

.date-item-3d span {
  color: var(--job-Description_Color);
  font-weight: 500;
}

.date-item-3d strong {
  color: var(--header__color);
  font-weight: 600;
}

.trial-notice-3d {
  margin-top: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 12px;
  border: 1px solid #fbbf24;
  transform: translateZ(10px);
}

.trial-notice-3d .date-item-3d span {
  color: #92400e;
}

.trial-notice-3d .date-item-3d strong {
  color: #92400e;
}

[data-theme="dark"] .billing-card-3d {
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .billing-card-3d:hover {
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .feature-icon-3d {
  background: var(--card__background);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .progress-bar-3d {
  background: var(--Skeleton__Background);
}

[data-theme="dark"] .feature-item-3d:hover {
  background: var(--tab__background);
}

[data-theme="dark"] .billing-item-3d {
  border-bottom: 1px solid var(--border__color);
}

@media (max-width: 768px) {
  .billing-cards-3d {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .plan-title-3d {
    font-size: 2rem;
  }

  .pricing-3d {
    font-size: 2.5rem;
  }

  .billing-card-3d {
    padding: 25px 20px;
  }

  .plan-header-3d {
    padding: 30px 20px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.glow-on-hover {
  position: relative;
  overflow: hidden;
}

.glow-on-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.glow-on-hover:hover::before {
  left: 100%;
}

[data-theme="dark"] .glow-on-hover::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

.quota-section-3d {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.quota-card-3d {
  background: var(--cards-background);
  border: 1px solid var(--cards-border);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),
    0 3px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quota-card-3d:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.1),
    0 6px 15px rgba(0, 0, 0, 0.06);
}

.quota-card-header-3d {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.quota-header-left-3d {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quota-icon-3d {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(115, 103, 255, 0.15),
    rgba(139, 133, 245, 0.15)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.quota-icon-3d svg,
.quota-icon-3d img {
  width: 20px;
  height: 20px;
}

.quota-heading-text-3d h4 {
  margin: 0 0 2px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--header__color);
}

.quota-heading-text-3d p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--job-Description_Color);
}

.quota-badge-3d {
  align-self: center;
  border: 1px solid #00713633;
  background: #D7F9DE;
  color: #007136;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
}

.quota-stats-row-3d {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  grid-gap: 0;
  gap: 0;
  border: 1px solid var(--border__color);
  border-radius: 20px;
  overflow: hidden;
}

.quota-stat-3d {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.quota-stat-3d:not(:nth-child(4))::after {
  content: "";
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--border__color);
}

.quota-stat-3d {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.quota-stat-value-3d {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--header__color);
  line-height: 1.2;
}

.quota-stat-value-highlight-3d {
  color: #38a169;
}

.quota-stat-value-accent-3d {
  color: var(--primary__color);
}

.quota-stat-unit-3d {
  font-size: 0.75rem;
  color: var(--job-Description_Color);
}

.quota-stat-label-3d {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--job-Description_Color);
  font-weight: 500;
}

.quota-ring-3d {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quota-ring-track-3d {
  stroke: var(--Skeleton__Background);
}

.quota-ring-fill-3d {
  stroke: var(--primary__color);
  transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quota-ring-text-3d {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.quota-ring-value-3d {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--header__color);
}

.quota-ring-label-3d {
  font-size: 0.65rem;
  color: var(--job-Description_Color);
}

@media (max-width: 900px) {
  .quota-stats-row-3d {
    grid-template-columns: repeat(2, 1fr);
  }

  .quota-ring-3d {
    grid-column: span 2;
    justify-self: center;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .quota-card-3d {
    padding: 20px;
  }

  .quota-stats-row-3d {
    grid-template-columns: 1fr;
  }

  .quota-ring-3d {
    grid-column: span 1;
  }
}
.subscription-content {
  width: 80%;
  height: auto;
}

.subscription-container {
  padding: 20px;
  border-radius: 8px;
  width: 95%;
}

.tabs-container {
  display: flex;
  padding: 0px 10px;
  gap: 10px;
  cursor: pointer;
}

.content-container {
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border__color);
}
.subscription-container .tab {
  padding: 15px;
  padding-bottom: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.subscription-tab-active {
  color: #6860ee;
  border-bottom: 4px solid #6860ee;
}

/* Billings Tab css */

.team-plan-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

img.tick-icon {
  width: 20px;
  height: 20px;
}

h3.team-plan-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payment-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  border-bottom: 1px solid var(--border__color);
}
span.payment-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

span.month-span {
  font-size: 18px;
  color: var(--job-Description_Color);
  font-weight: 500;
}
span.user-email {
  color: var(--job-Description_Color);
}
.plans-tags {
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
}

.plan-tag-container {
  display: flex;
  gap: 10px;
  border: 1px solid var(--border__color);
  padding: 10px;
  width: -webkit-fit-content;
  width: fit-content;
  border-radius: 5px;
  background-color: var(--subscription_Plan_Background);
  align-items: center;
  white-space: nowrap;
}

.invoice-date-details {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

img.debit-card-icon {
  width: 12%;
}

span.debit-card-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.brecker {
  margin-top: 15px;
  border-bottom: 1px solid var(--border__color);
}

span.bank-name {
  color: var(--job-Description_Color);
}
span.team-plan-span {
  color: var(--job-Description_Color);
}
.debit-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
@media (min-width: 2000px) {
  .subscription-content {
    width: 85%;
  }
}
@media (max-width: 1100px) {
  .team-plan-container {
    flex-direction: column;
    align-items: baseline;
    gap: 10px;
  }
}
@media (max-width: 850px) {
  .payment-details {
    font-size: 14px;
  }
}
.pricing {
  font-weight: 800;
}

.small-dollar {
  font-size: 18px; 
}

@media (max-width: 768px) {
  .payment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    border-bottom: 1px solid var(--border__color);
  }
}

img.theme-image {
  width: 100%;
  cursor: pointer;
}
.theme-options-container {
  display: flex;
  width: 100%;
  gap: 25px;
  margin-top: 2.5vw;
}
.theme-option {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-option.active .theme-image {
  border: 2px solid #6665ea;
  border-radius: 12px;
  padding: 2px;
}
span.theme-title-span {
  margin-top: 15px;
}
span.theme-title-span.active {
  color: #6665ea;
  font-weight: 600;
}
@media (max-width: 768px) {
  .theme-options-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 25px;
    gap: 25px;
    margin-top: 2.5vw;
  }
}

@media (max-width: 480px) {
  .theme-options-container {
    grid-template-columns: 1fr;
  }
}

.no-custom-fields-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.required-field-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 30px;
}
.required-field-content {
    display: flex;
    flex-direction: column;
}
.required-field-content h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--text_color);
}
.required-field-content p {
    margin: 8px 0 0;
    font-size: 16px;
    color: var(--text-color-accent);
    line-height: 1.4;
}
.custom-field-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid var(--grid-bg);
    border-radius: 999px;
    background: var(--grid-bg);
    color: var(--grid-na-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.cf-create-sidepopup-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-gap: 10px;
    gap: 10px;
    align-items: start;
}
.cf-left-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cf-create-left-side {
    border: 1px solid var(--border__color);
    border-radius: 20px;
    padding: 10px;
}
.cf-quick-add-card {
    border: 1px solid var(--border__color);
    border-radius: 20px;
    padding: 16px;
}
.add-new-field-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--body__background);
  }
  
  .add-new-field-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #6860EE1A;
    color: #6860EE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 500;
    flex-shrink: 0;
  }
  
  .add-new-field-content {
    display: flex;
    flex-direction: column;
  }
  
  .add-new-field-title {
    color: var(--text_color);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
  }
  
  .add-new-field-subtitle {
    color: var(--text-color-accent);
    font-size: 13px;
    line-height: 18px;
  }
  .cf-tip-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .cf-preview-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-preview-card {
    border: 1px solid var(--border__color);
    border-radius: 20px;
    overflow: hidden;
    background: var(--body__background);
}

.cf-preview-header {
    padding: 10px;
}

.cf-preview-label {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--text-color-accent);
}

.cf-preview-header h3 {
    margin: 6px 0 4px;
    font-size: 22px;
    font-weight: 500;
    color: var(--text_color);
}

.cf-preview-header p {
    margin: 0;
    color: var(--text-color-accent);
    font-size: 14px;
}

.cf-tip-content {
    margin: 0;
    color: var(--text-color-accent);
    font-size: 14px;
}

.cf-preview-divider {
    height: 1px;
    background: var(--border__color);
}

.cf-preview-fields {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 80vh;
}

.cfcallstage-preview-fields {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 80vh;
    border: 1px solid var(--border__color);
    border-radius: 16px;
    margin: 10px;
}

.cfcallstage-outer-preview-fields {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 80vh;
    border: 1px solid var(--border__color);
    border-radius: 16px;
    margin: 10px;
}

.cf-system-field-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border__color);
    border-radius: 16px;
    background: var(--body__background);
}

.cf-drag-icon {
    width: 16px;
    opacity: .8;
}

.cf-system-field-content {
    flex: 1 1;
}

.cf-system-field-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cf-system-title {
    color: var(--text_color);
    font-size: 15px;
    font-weight: 600;
}

.cf-system-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border__color);
    color: var(--text-color-accent);
    font-size: 12px;
}

.cf-custom-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #6860EE4D;
    color: var(--all-tracked-created-selected-text);
    font-size: 12px;
    background-color: #6860EE0D;
}

.cf-system-lock {
    width: 12px;
    height: 12px;
}

.cf-system-input {
    width: 93%;
    height: 42px;
    border: 1px solid var(--border__color);
    border-radius: 10px;
    padding: 0 14px;
    background: transparent;
    color: var(--text_color);
}

.cf-system-input::placeholder {
    color: var(--text-color-accent);
}

.cf-preview-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-color-accent);
}

.system-dot,
.custom-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.system-dot {
    background: #C9CED8;
}

.custom-dot {
    background: #6860EE;
}

.cf-preview-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}

.cf-preview-action-icon {
    width: 27px;
    height: 27px;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.cf-preview-action-icon:hover {
    opacity: .8;
    transform: scale(1.08);
}

.cf-preview-delete {
    width: 16px;
    height: 16px;
}
.cf-quick-add-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.cf-quick-add-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text_color);
    font-size: 15px;
    font-weight: 500;
}
.cf-header-and-reorder-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.cf-reorder-save-and-cancel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.cf-dragging .cf-custom-field-card {
    background-color: #6860EE0D;
    border: 1px solid #6860EE;
}
.month-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 999px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.month-filter__option {
  display: inline-flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #60708d;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.month-filter__option:hover:not(:disabled) {
  color: #6860ee;
}

.month-filter__option--active {
  background: #6860ee;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(104, 96, 238, 0.24);
}

.month-filter__option--active:hover:not(:disabled) {
  color: #ffffff;
}

.month-filter__option:focus-visible {
  outline: 2px solid rgba(104, 96, 238, 0.35);
  outline-offset: 2px;
}

.month-filter__option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 560px) {
  .month-filter {
    overflow-x: auto;
    width: 100%;
  }

  .month-filter__option {
    flex: 0 0 auto;
    min-width: 94px;
  }
}

/* Compact feedback card design */
.feedback-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.feedback-card {
  background-color: var(--body__background);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
  position: relative;
}

.feedback-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.feedback-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
  margin: 0;
}

.feedback-meta-info {
  text-align: right;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.feedback-user,
.feedback-tenant,
.feedback-date {
  margin: 0;
  margin-bottom: 2px;
}

.feedback-user strong,
.feedback-tenant strong,
.feedback-date strong {
  color: #475569;
}

.feedback-rating {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.rating-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--header__color);
  min-width: 50px;
}

.feedback-description {
  margin-bottom: 12px;
}

.feedback-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--header__color);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-text {
  color: var(--job-Description_Color);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 8px;
  background-color: var(--body__background);
  border: 1px solid #3b82f6;
  border-radius: 6px;
  border-left: 4px solid #3b82f6;
}

.feedback-images {
  margin-bottom: 0;
}

.feedback-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 8px;
}

.feedback-image {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s ease;
}

.feedback-meta-compact {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #64748b;
}

.meta-icon {
  font-size: 14px;
  color: #94a3b8;
}

.feedback-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #3b82f6;
  color: white;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.dashboard-container {
  width: 100%;
  /* background-color: var(--body__background);
  color: var(--header__color); */
  /* display: flex;
  flex-direction: column;
  align-items: center; */
}

.dashboard-page-outer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* max-width: 1140px; */
  justify-content: center;
  margin: auto 0;
  /* height: 80vh; */
}

.chart-subscription-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.dashboard-button {
  display: flex;
  width: 100%;
  justify-content: center;
}
.dashboard-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  width: 50%;
  height: 35vh;
  perspective: 1000px;
}
.chart-section {
  width: 100%;
}
.dashboard-main-container {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 25px;
  background-color: var(--body__background);
  color: var(--header__color);
}
.dashboard-main-admin-container {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 25px;
  background-color: var(--body__background);
  color: var(--header__color);
}
.dashboard-main-left-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.dashboard-main-left-admin-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
/* .datepicker-tab-container{
  border: 1px solid #ddd;
  border-radius: 12px;
} */
.datepicker-header {
  display: flex;
  gap: 10px;
  align-items: center;
}
.datepicker-header img {
  width: 25px;
  height: 25px;
}
.dashboard-horizontal-tabs {
  margin-top: 25px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.year-chart-container {
  color: var(--header__color);
  background-color: var(--body__background);
  border-radius: 8px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0px 30px;
  transition: transform 0.3s ease;
}
.no-content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.success-chart-container {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 20px;
  margin: 10px;
  text-align: center;
  transition: transform 0.3s ease;
  width: 30%;
}
.year-chart-container:hover {
  transform: translateY(-5px);
}
.success-chart-container:hover {
  transform: translateY(-5px);
}
.chart-header {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--header__color);
}

.chart-description {
  font-size: 14px;
  margin-bottom: 20px;
  color: var(--header__color);
}

.user-panel-outer {
  background-image: url(/static/media/Dashboard-Banner.ffd9d5c354c4a29d4fc5.png);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  color: white;
  padding: 35px 20px;
  object-fit: contain;
  border-radius: 12px;
  height: 100px;
}

img.single-cephea-icon {
  width: 35px;
  height: 45px;
}
.add-member-banner {
  display: flex;
  align-items: center;
  background-color: #e0e7ff;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0px 30px;
  margin-top: 10px;
animation: pulseSmall 3s ease-in-out infinite;
}
@keyframes pulseSmall {
  0% { 
    transform: scale(1); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  50% { 
    transform: scale(1.02); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  } 
  100% { 
    transform: scale(1); 
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.banner-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}
.banner-content {
  flex-grow: 1;
}
.subscription-alert-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #fff4e5, #ffe8cc);
  color: #7a3b00;
  padding: 14px 18px;
  margin: 0px 30px;
  border: 1px solid #ffd9a0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 180, 0, 0.15);
  animation: slideDown 0.6s ease-out, fadePulse 3s infinite ease-in-out,
    bannerPulse 2.5s infinite ease-in-out;
}
.subscription-alert-banner.free-trial-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-left: 4px solid #4caf50;
}

.subscription-alert-banner.free-trial-banner .alert-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.subscription-alert-banner.free-trial-banner {
  background: #e8f5e8;
  border: 1px solid #4caf50;
  color: #2e7d32;
  margin-bottom: 20px;
}

.subscription-alert-banner.free-trial-banner .alert-text strong {
  color: #2e7d32;
}

.subscription-alert-banner.free-trial-banner .start-trial-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 12px;
}

.subscription-alert-banner.free-trial-banner .start-trial-btn:hover {
  background: #45a049;
}
@keyframes bannerPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 180, 0, 0.15);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(255, 180, 0, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 180, 0, 0.15);
  }
}

.add-member-banner h3 {
  margin: 0;
  font-size: 18px;
  color: #4c1d95;
}

.add-member-banner p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #7c3aed;
}

.add-member-button:hover {
  background-color: #7c3aed;
}
.cephea-span-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.dashboard-header-main-container {
  display: flex;
  gap: 10px;
  padding: 10px 30px;
  border-bottom: 1px solid #cecece;
  /* width: 100%; */
  align-items: center;
  background-color: var(--body__background);
  color: var(--header__color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9;
  justify-content: center;
}
/* .dashboard-header-main-container img {
  width: 30px;
  height: 30px;
} */

h3.cephea-text {
  color: #6860ee;
  margin: 0;
  font-size: 35px;
}
.user-panel-inner {
  margin-top: -30px;
}

.user-panel-outer h2 {
  font-size: 24px;
  margin: 10px 0;
  color: #f3f3f3;
}

.user-panel-outer h5 {
  font-size: 16px;
  margin: 5px 0;
  color: #ddd;
}
.user-plan-outer {
  display: flex;
  gap: 20px;
}
.subscriber-list {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.subscriber-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.subscriber-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f8f9fa;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subscriber-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.subscriber-info {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 12px;
  color: #757575;
}

.value {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.subscriber-list-header h3 {
  margin: 0;
}
.subscriber-list-header {
  display: flex;
  gap: 10px;
}
.subscriber-list-header img {
  width: 25px;
  height: 25px;
}
.dashboard-logo-container img {
  width: 75px;
  height: auto;
  position: absolute;
  top: 50px;
}
.dashboard-logo-container {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.dashboard-main-right-container {
  border-radius: 8px;
  position: relative;
  z-index: 0;
  transition: width 0.3s ease;
}
.dashboard-main-right-admin-container {
  border-radius: 8px;
  position: relative;
  z-index: 0;
  transition: width 0.3s ease;
}

.dashboard-datepicker-container {
  padding: 0px 45px 20px 20px;
  border-bottom: 1px solid #ccc;
  border: 1px solid #ccc;
  border-radius: 12px;
}
.dashboard-tabs {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid #ccc;
}

.card-section {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.bg-image1 {
  width: 15% !important;
  height: auto !important;
  position: absolute !important;
  left: -136px;
  bottom: 30px !important;
  z-index: 0 !important;
  cursor: default;
}
.bg-image2 {
  width: 75% !important;
  position: absolute !important;
  bottom: 350px !important;
  left: 5px;
  cursor: default;
}
.Analyze-card {
  width: 60%;
  height: 50%;
  z-index: 9;
}

/* .card-section {
  display: flex;
  gap: 20px;
  justify-content: center;
} */

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.dashboard-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}

.card-front {
  background-color: white;
}

.card-front img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

.card-back {
  color: white;
  background-image: url(/static/media/backCard.3adeb7950d35adfb41a4.png);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-align: center;
}
.card-back p {
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
}

.min-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.min-container img {
  width: 25px;
  height: 25px;
}
.jobs-min-container,
.candidates-min-container,
.date-min-container {
  padding: 10px;
  border: 1px solid #ccc;
  width: -webkit-fit-content;
  width: fit-content;
  border-radius: 10px;
}
.dashboard-main-min-right-container {
  display: flex;
  justify-content: flex-end;
  transition: width 0.3s ease;
}
.dashboard-max-container {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  position: relative;
}
.dashboard-min-container {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  position: relative;
}
.job-close-icon {
  cursor: pointer;
  z-index: 9;
  position: absolute;
  right: 0;
  top: 22px;
  background-color: var(--body__background);
  width: 30px;
}

.job-open-icon {
  cursor: pointer;
  z-index: 9;
  position: absolute;
  top: 22px;
  left: -3vw;
  background-color: var(--body__background);
  width: 30px;
}
@media (max-width: 1100px) {
  .chart-section {
    display: flex;
    flex-direction: column;
  }
  .year-chart-container {
    width: 92%;
  }
  .success-chart-container {
    width: 92%;
  }
}
@media (max-width: 950px) {
  .dashboard-main-admin-container {
    flex-direction: column;
    align-items: center;
  }

  .dashboard-main-right-container {
    width: 80%;
  }
  .dashboard-main-right-admin-container {
    width: 80%;
  }
  .dashboard-main-left-container {
    margin-left: 0 !important;
    width: 50% !important;
  }
  .dashboard-main-left-admin-container {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .dashboard-main-right-container {
    width: 49% !important;
  }
  .dashboard-main-right-admin-container {
    width: 100% !important;
  }
  .user-panel-inner h1 {
    font-size: 1em;
  }
  .user-panel-inner h3 {
    font-size: 0.7em;
  }
}
@media (max-width: 800px) {
}

@media (min-width: 2000px) {
  .chart-subscription-container {
    flex-direction: row;
  }
  .subscriber-list {
    width: 50%;
  }
  .chart-section {
    width: 50%;
  }
  .bg-image1 {
    left: -200px;
    width: 200px;
  }
}

/* DashboardWithChat Design */

.custom-container {
  /* width: 100%; */
  /* max-width: 1140px; */
  /* margin: 0 auto; */
  padding: 20px 20px;
}

.layout-wrapper {
  display: flex;
  /* gap: 70px;  */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  /* padding: 24px;  */
  background: #7c3aed;
  border-radius: 24px;
  overflow: hidden;
  transition: height 0.3s ease;
}

.left-section {
  flex: 1 1;
  /* min-width: 300px;
  max-width: 480px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* gap: 16px; */
  width: 60%;
  height: 100%;
  padding: 40px;
}

.icon-container {
  width: 50%;
  /* height: 370px;  */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  /* margin-top: 30px; */
  padding: 24px 0px 0px 0px;
}

.icon {
  width: 60%;
  /* height: 100%; */
  object-fit: contain;
}

.welcome-text {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 24px;
  background: linear-gradient(90.45deg, #ffffff -2.93%, #d6ccff 104.49%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.description {
  margin-top: 2px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: #eee7f8;
}

.uploaded-dashboard-files-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.uploaded-dashboard-file {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;

  width: -webkit-fit-content;

  width: fit-content;
  max-width: 208px;
  height: 28px;

  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #ffffff;
  border-radius: 8px;

  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}

.uploaded-dashboard-file-icon img {
  width: 22px;
  height: 22px;
}

.uploaded-dashboard-filename-container {
  width: 152px;
  height: 16px;
  display: flex;
  align-items: center;
}

.uploaded-dashboard-filename {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: #ffffff;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-dashboard-close-icon {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}

.uploaded-dashboard-close-icon img {
  width: 16px;
  height: 16px;
}

/* Chat card */
.chat-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff14;
  box-shadow: 0px 8px 10px -6px rgba(0, 0, 0, 0.1),
    0px 20px 25px -5px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
  border: 0.5px solid #ffffff30;
}

.job-details-box {
  border: 0.5px solid #ffffff76;
  border-radius: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
}

.job-details-input {
  width: 100%;
  min-height: 60px;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  background: transparent;
  color: white;
  outline: none;
  resize: none;

  ::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}
.job-details-input::placeholder {
  color: white;
}

.ask-me-anything-bar {
  border: 0.5px solid #ffffff76;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.ask-me-anything-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  width: 100%;
}

.ask-me {
  flex: 1 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: white;
}

.ask-me::placeholder {
  color: white;
}

input.ask-me:-webkit-autofill,
input.ask-me:-webkit-autofill:hover,
input.ask-me:-webkit-autofill:focus,
input.ask-me:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.015) inset !important;
  -webkit-text-fill-color: white !important;
  caret-color: white;
  -webkit-transition: background-color 9999s ease-out, color 9999s ease-out;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

.attach-icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* .start-chat-btn {
  background: white;
  color: #7C3AED;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid #7C3AED; 
} */

.ai-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.cards-container {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 20px;
  padding: 20px;
  /* width: 100%;
  max-width: 1100px; 
  margin: 0 auto;*/
  justify-content: center;
}

/*Responsive CSS*/

@media screen and (min-width: 2560px) {
  .custom-container {
    /* max-width: 1970px; */
    max-width: 100%;
    padding: 32px 60px;
  }

  .layout-wrapper {
    height: 420px;
    padding: 48px;
    gap: 170px;
  }

  .left-section {
    max-width: 1100px;
    gap: 25px;
  }

  .icon-container {
    width: 440px;
    height: 440px;
  }

  .welcome-text {
    font-size: 48px;
    line-height: 56px;
  }

  .description {
    font-size: 20px;
    line-height: 30px;
  }

  .chat-card {
    max-width: 1000px;
    padding: 20px;
  }

  .job-details-input,
  .ask-me {
    font-size: 16px;
  }

  .cards-container {
    max-width: 100%;
    gap: 25px;
    padding: 40px;
  }
}

@media screen and (max-width: 1150px) {
  .cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
    max-width: 100%;
    height: auto;
    padding: 20px;
  }

  .left-section {
    padding: 0px 24px;
  }

  .layout-wrapper {
    padding: 14px;
  }

  .welcome-text {
    font-size: 22px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1800px) {
  .layout-wrapper {
    align-items: stretch;
    justify-content: space-between;
  }

  .left-section {
    flex: 1 1;
    min-width: 0;
    width: auto;
    padding: 20px 24px;
  }

  .welcome-text {
    font-size: 34px;
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .description {
    font-size: 18px;
    line-height: 26px;
  }

  .icon-container {
    flex: 0 1 34%;
    min-width: 210px;
    width: auto;
  }

  .icon {
    width: 78%;
  }
}

@media screen and (max-width: 768px) {
  .dashboard-header-main-container {
    border-bottom: none;
  }

  .icon-container {
    display: none;
  }

  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .cards-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .dashboard-header-main-container {
    display: none;
  }
}

.dashboardcard {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(25% - 20px);
  /* max-width: calc((1140px - 60px) / 4); */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  justify-content: space-between;
  /* width: 259.5px; */
  /* height: 265px; */
  background: var(--card__background);
  border: 1px solid var(--cards-border);
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;

}

.dashboardcard:hover {
  transform: translateY(-10px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.card-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;  
  min-height: 40px; 
  flex-shrink: 0;
  background: var(--tab__background);
  border-radius: 12px;
  margin-bottom: 12px;
  position: relative;
}

.card-icons {
  position: relative;
  width: 20px;
  height: 20px;
}

.card-icons {
  position: relative;
  width: 20px;
  height: 20px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 195px;
  height: 135px;
  margin-bottom: 20px;
}
.card-content h2 {
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 29px;
  letter-spacing: -0.3px;
  color: var(--header__color);
  margin: 0;
}

.card-content p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--short-long-description-textcolor);
  margin: 0;
}

.dashboardcard:hover {
  background-color: #7437d9;
}

.dashboardcard:hover h2,
.dashboardcard:hover p {
  color: white;
}

/* Large Screens / 4K (≥2560px) */
@media screen and (min-width: 2661px) {
  .dashboardcard {
    width: 320px;
    height: 320px;
    padding: 28px;
  }

  .card-icon-container {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .card-icons {
    width: 24px;
    height: 24px;
  }

  .card-content {
    gap: 12px;
    width: 420px;
    height: 120px;
    margin-bottom: 24px;
  }

  .card-content h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .card-content p {
    font-size: 16px;
    line-height: 22px;
  }
}


/* Responsive Styles */

@media screen and (max-width:1300px)  {
  .card-content {
    width: 180px;
  }
}

@media screen and (max-width:1150px)  {
  .card-content {
    width: auto;
    height: auto;
  }

  .dashboardcard {
    max-width: none;
    height: 200px;
  }
}

@media screen and (max-width:768px) {

  .dashboardcard {
    width: 100%;
    height: 100%;
    padding: 16px;
    max-width: none;
  }
  .card-content {
    width: 100%;
    height: 100%;
  }
}

.metrics-dashboard {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-direction: column;
  margin-bottom: 10px;
}
.css-1j74uew-MuiPaper-root-MuiCard-root {
  width: 100%;
}

.metric-card {
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.title {
  font-size: 1rem;
  color: #4b5563;
  font-weight: 500;
}
.header-icon-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.arrow-icon {
  width: 1rem;
  height: 1rem;
  color: #9ca3af;
}

.metric-value {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.metric-value-description {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.percentage {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}

.trend-text {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 5px;
}

.trend-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}

.trend-line svg {
  width: 100%;
  height: 100%;
}

.trend-path {
  fill-opacity: 0.5;
}

.trend-path.purple {
  fill: #ede9fe;
}

.trend-path.green {
  fill: #dcfce7;
}

.icon-wrapper {
  padding: 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .card-header-icon {
  width: 16px;
  height: 16px;
} */

.icon-bg-candidates {
  background-color: var(--icon-bg-candidates);
  width: 16px;
  height: 16px;
}
.icon-bg-create-candidate {
  width: 16px;
  height: 16px;
  background-color: var(--icon-bg-interviews);
}
.icon-bg-clients {
  width: -webkit-fit-content !important;
  width: fit-content !important;
  height: -webkit-fit-content !important;
  height: fit-content !important;
}
.icon-bg-jobs {
  background-color: var(--icon-bg-jobs);
  width: 16px;
  height: 16px;
}

.icon-bg-interviews {
  background-color: var(--icon-bg-interviews);
  width: 16px;
  height: 16px;
}

.icon-bg-tracked {
  background-color: var(--icon-bg-tracked);
  width: 16px;
  height: 16px;
}
.dice-main-search-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  grid-gap: 10px;
  gap: 10px;
  grid-column-gap: 20px;
  column-gap: 20px;
}
.dice-header-and-icon {
  display: flex;
  align-items: center;
}
.dice-outer-main-container {
  padding: 25px;
}
.dice-advance-search-container {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  grid-gap: 10px;
  gap: 10px;
  grid-column-gap: 20px;
  column-gap: 20px;
}
.exp-from-to {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.check-box-container {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  gap: 20px;
}
.advanced-search-toggle {
  display: flex;
  gap: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: -10px;
  margin-top: -10px;
}
h4.advance-search-text {
  color: #6860ee;
}
.dice-search-button-container {
  margin-bottom: 10px;
  margin-top: 20px;
}
.candidate-results-container {
  margin-top: 20px;
}

.candidate-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}
.dice-no-search-result {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
strong {
    color: #6860ee;
}
.dice-view-load {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-no-search-result .lf-player-container {
  margin-top: -30px;
}
.dice-main-search-container > *,
.dice-advance-search-container > * {
  min-width: 0;
  width: 100%;
}
@media (max-width: 768px) {
  .dice-main-search-container {
    grid-template-columns: 1fr;
  }
  .dice-advance-search-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 425px) {
  .exp-from-to {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.dice-account-bar {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}
.conversations-page {
  width: 100%;
}

.page-header {
  margin-bottom: 24px;
}

.page-header .header-title {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.no-channels-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  width: 100%;
  position: relative;
  text-align: center;
  overflow-y: hidden;
}
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  width: 100%;
  position: relative;
}
.page-header .header-title-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--header__color);
  margin: 0;
}

.page-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.search-container {
  margin-bottom: 24px;
}

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

.search-icon {
  position: absolute;
  left: 11px;
  top: 62%;
  /* transform: translateY(-50%); */
  width: 16px;
  height: 16px;
}

.search-input {
  width: -webkit-fill-available;
  padding: 10px 10px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--body__background);
  color: var(--header__color);
}

.conversations-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.conversation-category {
  margin-bottom: 16px;
}

.date-category {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.date-category span {
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
  position: relative;
  display: inline-block;
}

.conversation-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
  grid-gap: 20px;
  gap: 20px;
}

@media (max-width: 768px) {
  .conversation-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .conversation-cards {
    grid-template-columns: 1fr;
  }
}

.conversation-card-wrapper {
  position: relative;
}

.conversation-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--body__background);
  /* border: 1px solid #c7d2fe; */
  /* box-shadow: 0 1px 2px rgba(224, 231, 255, 50%); */
  /* padding: 20px; */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 140px;
}

.conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgb(0 0 0 / 7%);
  cursor: pointer;
}

.conv-card-time {
  font-size: 12px;
  color: var(--conversations-text);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.conv-card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--conversations-header);
  padding: 14px 20px;
  gap: 10px;
}

.conv-job-card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--conversations-job-header);
  padding: 14px 20px;
  gap: 10px;
}

.convo-toogle-container {
  position: -webkit-sticky;
  position: sticky;
  top: 64px;
  z-index: 90;
  width: 100%;
  display: flex ;
  padding: 20px;
  background-color: var(--body__background);
}

.convo-toogle-container .buttonoptions {
  display: inline-flex;
  align-items: center;
  background-color: var(--grid-bg);
  border: none;
  padding: 4px;
  display: flex;
  border-radius: 100px;
  align-items: center;
  box-shadow: none;
}

.convo-toogle-container .buttonactive {
  background: var(--grid-a-bg) !important;
  color: var(--grid-a-text) !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 999px !important;
  border: none !important;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: none;
}

.convo-toogle-container .buttoninactive {
  background: var(--grid-i-bg) !important;
  color: var(--grid-i-text) !important;
  transform: translateY(-1px);
  border-radius: 999px !important;
  border: none !important;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
  .convo-toogle-container {
    position: -webkit-sticky;
    position: sticky;
    top: 62px;
    z-index: 90;
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    padding-top: 20px;
    margin-left: -2px;
    padding-right: 5px;
    background-color: var(--body__background);
  }
}

.conv-card-icon {
  background: #c9d5ff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
}

.conv-card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  /* display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
  display: block;
}

.candidate-name-icon {
  color: #6366f1;
}

.conv-card-content {
  padding: 20px;
  width: auto;
  height: -webkit-fit-content;
  height: fit-content;
  margin-bottom: 0;
}

.conv-card-subtext {
  font-size: 14px;
  font-weight: 500;
  color: var(--conversations-text);
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 40px;
  min-height: 40px;
}

.conv-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  width: 100%;
}

.time-icon-convo {
  width: 16px;
  /* Adjust as needed */
  height: 16px;
  /* Adjust as needed */
  margin-right: 6px;
  /* Space between icon and text */
}

.user-icon-convo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  /* Adjust as needed */
  height: 32px;
  /* Adjust as needed */
  background-color: #f0f0f0;
  /* Light background */
  border-radius: 50%;
  /* Circular background */
  padding: 6px;
  /* Padding around the icon */
  cursor: pointer;
  /* To indicate it's clickable */
}

.next-icon-convo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  /* Adjust as needed */
  height: 32px;
  /* Adjust as needed */
  /* background: var(--conversations-header);  */
  border-radius: 50%;
  /* Circular background */
}

.next-icon-convo img {
  width: 50%;
  /* Make icon fill the padded circle */
  height: 50%;
}

.user-icon-convo img {
  width: 100%;
  /* Make icon fill the padded circle */
  height: 100%;
}

.next-icon {
  width: 20px;
  height: 20px;
  /* color: var(--conversations-headertext); */
  cursor: pointer;
}

.next-icon:hover {
  transform: scale(1.05);
}

.next-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.time-icon-convo {
  width: 16px;
  /* Adjust as needed */
  height: 16px;
  /* Adjust as needed */
  margin-right: 6px;
  /* Space between icon and text */
}

.user-icon-convo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  /* Adjust as needed */
  height: 32px;
  /* Adjust as needed */
  background-color: #f0f0f0;
  /* Light background */
  border-radius: 50%;
  /* Circular background */
  padding: 6px;
  /* Padding around the icon */
  cursor: pointer;
  /* To indicate it's clickable */
}

.user-icon-convo img {
  width: 100%;
  /* Make icon fill the padded circle */
  height: 100%;
}

.conv-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

/* Icon styles for different card types */
.icon-person {
  color: #4f46e5;
  background-color: #e0e7ff;
}

.icon-marketing {
  color: #f59e0b;
  background-color: #fef3c7;
}

.icon-remote {
  color: #10b981;
  background-color: #d1fae5;
}

.icon-devops {
  color: #8b5cf6;
  background-color: #ede9fe;
}

.icon-ux {
  color: #ec4899;
  background-color: #fce7f3;
}

/* Time display styles for different card types */
.person-time {
  color: #888c94;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.marketing-time {
  color: #f59e0b;
}

.remote-time {
  color: #10b981;
}

.devops-time {
  color: #8b5cf6;
}

.ux-time {
  color: #ec4899;
}

.chat-channel-delete-popup {
  padding: 20px;
}
.feedback-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 30px;
}

.feedback-main-container {
    margin: 10px auto;
}

.feedback-inner-container {
    margin-bottom: 20px;
}

img.screen-shot-image {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border: 1px dotted rgb(102, 101, 234);
    border-radius: 5px;
}

.screen-shot-container {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    gap: 3vw;
}
@media (min-width: 768px) and (max-width: 1024px) {
    .css-nzd25g {
        width: 107%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .css-nzd25g {
        width: 90%;
    }
}
.monster-search-container {
    padding: 25px;
}

/* .monster-usa-search-container form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px; 
    align-items: start;
} */

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-usa-toggle {
    display: inline-flex;
    /* gap: 20px; */
    font-size: 14px;
    margin-left: -40px;
}

.exp-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    gap: 15px;
    align-items: end;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 30px;
}

.full-width {
    /* grid-column: 1 / -1; */
    justify-self: flex-start;
    margin-left: 25px;
    margin-bottom: 20px;
}
.monster-search-header {
    display: flex;
    align-items: center;
    padding: 5px 30px;
    border-bottom: 1px solid var(--border__color);
    height: 60px;
}
.monster-results-section {
    padding: 25px;
}
.monster-candidates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

.default-search-usa-fields {    
  position: relative; 
  /* display: flex; */
  gap: 20px;
  align-items: flex-start;
}

.advanced-search-toggle {
  position: relative;
  top: 10px;    
  right: 10px;     
  justify-content: end;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.advance-search-text {
  color: #6c63ff;   
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.monster-no-search-result{
    text-align: center;
}

.monster-no-search-result .lf-player-container{
   margin-top: -30px;
}
/* @media (max-width: 880px) {
    .monster-usa-search-container form {
        grid-template-columns: 1fr;
    }
} */

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .default-search-usa-fields{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        gap: 20px
    }
    .advance-search-fields{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        gap: 20px
    }
}
@media only screen and (min-width: 769px) and (max-width: 2560px) {
    .default-search-usa-fields{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        gap: 20px
    }
    .advance-search-fields{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        gap: 20px
    }
}
@media only screen and (min-width: 320px) and (max-width: 495px) {
    .monster-search-header{
        display: flex;
        align-items: center;
        padding: 5px 15px;
        border-bottom: 1px solid var(--border__color);
        height: 60px;
        margin-top: 20px;

    }
}

.monster-search-container {
    padding: 25px;
}

.monster-search-container form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 20px;
    gap: 20px 20px; 
    align-items: start;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-toggle {
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.exp-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    gap: 15px;
    align-items: end;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 30px;
}

.full-width {
    /* grid-column: 1 / -1; */
    justify-self: flex-start;
    margin-left: 25px;
    margin-bottom: 20px;
}
.monster-search-header {
    display: flex;
    align-items: center;
    padding: 5px 30px;
    border-bottom: 1px solid var(--border__color);
    height: 60px;
}
.monster-results-section {
    padding: 25px;
}
.monster-candidates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

.default-search-fields {
  position: relative; 
  /* display: flex; */
  gap: 20px;
  align-items: flex-start;
}

.advanced-search-toggle {
  position: relative;
  top: 10px;    
  right: 10px;     
  justify-content: end;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.advance-search-text {
  color: #6c63ff;   
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.monster-no-search-result{
    text-align: center;
}

.monster-no-search-result .lf-player-container{
   margin-top: -30px;
}
.notice-period-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.notice-period-field-select {
height: 75px;
}
@media (max-width: 880px) {
    .monster-search-container form {
        grid-template-columns: 1fr;
    }
}
.jobs-side-dialog-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jobs-details-content-container {
  margin: 30px;
  margin-top: -25px;
}
.jobs-side-dialog-card-header1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cephea-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15vw;
}
.jobs-side-dialog-card-header img {
  width: 25px;
}
.jobs-side-dialog-card-header img {
  width: 25px;
}

.job-share-icons-container img {
width: 25px;
cursor: pointer;
} 

h3.recommented-jobs-card-header {
  text-align: left;
}
.job-subtitle {
  color: rgb(119 115 115);
  margin: 0;
  font-size: 12px;
  width: "fit-content";
}
.jobs-side-dialog-card-header-outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jobs-side-dialog-card-right-header {
  display: flex;
  /* gap: 15px; */
}
img.info-icon {
  width: 25px;
  height: 25px;
}
.info-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inner-drag-drop-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.file-name-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 15px;
  margin-top: -20px;
  margin-left: 10px;
  gap: 10px;
}

.shared-job-custom-fields-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 20px 0;
}

.shared-job-custom-field {
  width: 100%;
}

.shared-job-custom-field-error {
  color: #ff0000;
  font-size: 13px;
  margin-top: 4px;
}

img.drag-and-drop-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.candidate-information-container {
  display: flex;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  margin-top: 3vw;
}
.candidate-information {
  padding: 0px 15px;
  border-right: 1px solid var(--border__color);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  margin-top: 16px;
}

h3.candidate-value {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 500;
  font-size: 16px;
}
h4.info-header-value {
  color: #6a69eb;
  margin-bottom: 0px;
  margin-top: 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

.job-tabs-container {
  display: flex;
  margin-top: 2vw;
}

.job-tab-active {
  color: #6860ee;
  border-bottom: 4px solid #6860ee;
  border-radius: 0px !important;
}

.job-tabs-container .tab {
  padding: 15px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.job-content-container {
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--search-input-section-border);
}

.job-content-container p {
  font-size: 16px;
}
h3.assign-candidate-header-text {
  color: #7574ec;
}
.assign-candidate-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  /* margin-top: 1vw; */
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.page-selector-container-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
  z-index: 8;
  background-color: var(--body__background);
  padding-top: 25px;
}

  @media (max-width: 768px) {
    .page-selector-container-wrap {
      position: -webkit-sticky;
      position: sticky;
      top: 69px;
      z-index: 8;
      background-color: var(--body__background);
      padding-top: 25px;
    }
  }

.jobs-main-container {
  width: 100%;
}
.jobs-outer-container {
  border-radius: 5px;
  text-align: center;
  padding: 0 20px;
}
.jobs-statuslegend {
  display: flex;
  gap: 20px;
}
.disabled-button {
  background-color: #cccccc !important;
  color: #666666 !important;
  opacity: 0.6;
  cursor: not-allowed;
  border: 1px solid #aaaaaa;
}

.disabled-button:hover {
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed;
}
.jobs-table-list-container {
  display: flex;
  justify-content: center;
}
.jobs-table-list-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 20px;
  row-gap: 20px;
  grid-column-gap: 20px;
  column-gap: 20px;
  border-radius: 5px;
  min-height: 300px;
  margin-right: 2px;
}
.icon-status div {
  cursor: pointer;
}
.tags-instruction {
  margin: 0;
  font-style: italic;
}
.col2 {
  display: flex;
  gap: 2%;
}
.client-and-openings-container {
  display: flex;
  gap: 2%;
  align-items: flex-start;
}

.client-and-openings-container .MuiAutocomplete-root {
  width: 100% !important;
}

.client-and-openings-container .MuiFormControl-root {
  width: 100% !important;
}

.client-and-openings-container .MuiAutocomplete-root .MuiOutlinedInput-root {
  height: 40.5px !important;
  min-height: 40px !important;
}

.client-and-openings-container .MuiAutocomplete-root .MuiInputBase-input {
  height: 40px !important;
  padding: 8px 12px !important;
}

.client-and-openings-container > div:last-child {
  margin-top: 4px !important;
}

.client-and-openings-container .MuiFormHelperText-root {
  color: #ff0000 !important;
  margin-left: -1px;
  font-size: 14px;
  margin-top: -2px;
}

@media (max-width: 1000px) {
  .jobs-table-list-card-container {
    display: flex;
    flex-wrap: wrap;
  }
}

.jobs-header-button-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  gap: 6px;
}
.back-to-job-list-button {
  display: flex;
  align-items: center;
}
.jobs-header-button-container .create-button {
  background-color: #6860ee !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}

.jobs-header-button-container .create-button:hover {
  background-color: #5c47ce !important;
  transform: scale(1.05) !important;
}

.jobs-header-button-container button:hover {
  background-color: #5946c4 !important;
}

.job-edit-actions {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.salary-inputs {
  display: flex;
  gap: 10px;
}

.shared-job-info-outer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border__color);
  border-radius: 16px;
  margin-bottom: 0;
}

.shared-job-info-outer-container .candidate-information:last-child {
  border-right: none;
}

.shared-job-info-outer-container input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: -webkit-fill-available;
}

.shared-job-info-outer-container input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

.candidate-info-outer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border__color);
  border-radius: 16px;
}

.candidate-info-outer-container .candidate-information:last-child {
  border-right: none;
}

.candidate-info-outer-container input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: -webkit-fill-available;
}

.candidate-info-outer-container input:focus {
  border-color: #6860ee;
  outline: none;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.2);
}

.job-info-outer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border__color);
  border-radius: 16px;
}

.buttonoptions {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.buttonoptions .buttonactive {
  background: #6860ee;
  color: #fff;
  font-weight: 500;
}

.buttonoptions .buttoninactive {
  background: var(--body__background);
  color: var(--header__color);
  font-weight: 400;
}

.buttonoptions button {
  min-width: 100px;
  border: none;
}

@media screen and (max-width: 1440px) {
  .jobs-table-list-card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1280px) {
  .jobs-table-list-card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1065px) {
  .shared-job-info-outer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

   .candidate-info-outer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }


  .job-info-outer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .candidate-information {
    width: -webkit-fill-available;
    padding: 0px 15px;
    border-right: none;
    flex-direction: row;
    margin: 10px 0px;
  }

  .candidate-information .info-header {
    width: 160px;
  }

  .assign-candidate-header {
    flex-direction: row;
  }

  .jobs-side-dialog-card-header-outer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .job-info-outer-container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .jobs-table-list-card-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  .candidate-information {
    flex-direction: column;
  }
}

.title-edit-icon-container {
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid #6860ee;
  position: relative;
  z-index: 5;
}

.title-edit-icon-container:hover {
  background-color: #d9d9ff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 8px rgba(104, 96, 238, 0.3);
}
.title-editer {
  height: 50px;
  width: 50px;
  margin-top: 30px;
  margin-left: 12px;
}

.no-op-skill-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-direction: column;
}
.no-op-skill-title {
  display: flex;
  flex-direction: row;
}
.user-dashboard-header-main-container {
  display: flex;
  gap: 10px;
  padding: 10px 30px;
  align-items: center;
  color: var(--header__color);
  top: 0;
  z-index: 9;
  justify-content: space-between;
  margin-bottom: -40px;
}
.dashboard-container {
  width: 100%;
  background-color: var(--body__background);
  /* background-color: var(--body__background);
  color: var(--header__color); */
  /* display: flex;
  flex-direction: column;
  align-items: center; */
}
.hearder-inner-container {
  justify-content: space-between;
  align-items: center;
  width: 50%;
}
.dashboard-page-outer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* max-width: 1140px; */
  justify-content: center;
  margin: auto 0;
  /* height: 80vh; */
}
.chart-subscription-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.dashboard-button {
  display: flex;
  width: 100%;
  justify-content: center;
}
.dashboard-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  width: 50%;
  height: 35vh;
  perspective: 1000px;
}
.chart-section {
  width: 100%;
}
.dashboard-main-container {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 25px;
  background-color: var(--body__background);
  color: var(--header__color);
}
.dashboard-main-admin-container {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 25px;
  background-color: var(--body__background);
  color: var(--header__color);
}
.dashboard-main-left-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.dashboard-main-left-admin-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
/* .datepicker-tab-container{
  border: 1px solid #ddd;
  border-radius: 12px;
} */
.datepicker-header {
  display: flex;
  gap: 10px;
  align-items: center;
}
.datepicker-header img {
  width: 25px;
  height: 25px;
}
.dashboard-horizontal-tabs {
  margin-top: 25px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.year-chart-container {
  color: var(--header__color);
  background-color: var(--body__background);
  border-radius: 8px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0px 30px;
  transition: transform 0.3s ease;
}
.recent-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.no-content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.success-chart-container {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 20px;
  margin: 10px;
  text-align: center;
  transition: transform 0.3s ease;
  width: 30%;
}
.year-chart-container:hover {
  transform: translateY(-5px);
}
.success-chart-container:hover {
  transform: translateY(-5px);
}
.chart-header {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--header__color);
}
.chart-description {
  font-size: 14px;
  margin-bottom: 20px;
  color: var(--header__color);
}
.user-panel-outer {
  background-image: url(/static/media/Dashboard-Banner.ffd9d5c354c4a29d4fc5.png);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  color: white;
  padding: 35px 20px;
  object-fit: contain;
  border-radius: 12px;
  height: 100px;
}
img.single-cephea-icon {
  width: 35px;
  height: 45px;
}
.cephea-span-container {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}
/* .dashboard-header-main-container img {
  width: 30px;
  height: 30px;
} */
.cephea-span-container-tenant-name {
  display: flex;
  gap: 10px;
  justify-content: end;
  align-items: center;
  width: 700px;
  margin-top: -62px;
}
h3.cephea-tentnt-text {
  color: #6860ee;
  margin: 0;
}
.dashboard-notification-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dashboard-notification-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: #6963ec;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.cephea-text {
  color: #6860ee;
  margin: 0;
  font-size: 35px;
}
.user-panel-inner {
  margin-top: -30px;
}
.user-panel-outer h2 {
  font-size: 24px;
  margin: 10px 0;
  color: #f3f3f3;
}
.user-panel-outer h5 {
  font-size: 16px;
  margin: 5px 0;
  color: #ddd;
}
.user-plan-outer {
  display: flex;
  gap: 20px;
}
.subscriber-list {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.subscriber-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
}
.subscriber-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f8f9fa;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.subscriber-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.subscriber-info {
  display: flex;
  flex-direction: column;
}
.label {
  font-size: 12px;
  color: #757575;
}
.value {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.subscriber-list-header h3 {
  margin: 0;
}
.subscriber-list-header {
  display: flex;
  gap: 10px;
}
.subscriber-list-header img {
  width: 25px;
  height: 25px;
}
.dashboard-logo-container img {
  width: 75px;
  height: auto;
  position: absolute;
  top: 50px;
}
.dashboard-logo-container {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.dashboard-main-right-container {
  border-radius: 8px;
  position: relative;
  z-index: 0;
  transition: width 0.3s ease;
}
.dashboard-main-right-admin-container {
  border-radius: 8px;
  position: relative;
  z-index: 0;
  transition: width 0.3s ease;
}
.dashboard-datepicker-container {
  padding: 0px 45px 20px 20px;
  border-bottom: 1px solid #ccc;
  border: 1px solid #ccc;
  border-radius: 12px;
}
.dashboard-tabs {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid #ccc;
}
.card-section {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.bg-image1 {
  width: 15% !important;
  height: auto !important;
  position: absolute !important;
  left: -136px;
  bottom: 30px !important;
  z-index: 0 !important;
  cursor: default;
}
.bg-image2 {
  width: 75% !important;
  position: absolute !important;
  bottom: 350px !important;
  left: 5px;
  cursor: default;
}
.Analyze-card {
  width: 60%;
  height: 50%;
  z-index: 9;
}
/* .card-section {
  display: flex;
  gap: 20px;
  justify-content: center;
} */
.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.dashboard-card:hover .card-inner {
  transform: rotateY(180deg);
}
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.card-front {
  background-color: white;
}
.card-front img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}
.card-back {
  color: white;
  background-image: url(/static/media/backCard.3adeb7950d35adfb41a4.png);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-align: center;
}
.card-back p {
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
}
.min-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.min-container img {
  width: 25px;
  height: 25px;
}
.jobs-min-container,
.candidates-min-container,
.date-min-container {
  padding: 10px;
  border: 1px solid #ccc;
  width: -webkit-fit-content;
  width: fit-content;
  border-radius: 10px;
}
.dashboard-main-min-right-container {
  display: flex;
  justify-content: flex-end;
  transition: width 0.3s ease;
}
.dashboard-max-container {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  position: relative;
}
.dashboard-min-container {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  position: relative;
}
.job-close-icon {
  cursor: pointer;
  z-index: 9;
  position: absolute;
  right: 0;
  top: 22px;
  background-color: var(--body__background);
  width: 30px;
}
.job-open-icon {
  cursor: pointer;
  z-index: 9;
  position: absolute;
  top: 22px;
  left: -3vw;
  background-color: var(--body__background);
  width: 30px;
}
.db-filters .filters {
  gap: 2vw;
}
@media (max-width: 1100px) {
  .chart-section {
    display: flex;
    flex-direction: column;
  }
  .year-chart-container {
    width: 92%;
  }
  .success-chart-container {
    width: 92%;
  }
  .cephea-span-container-tenant-name {
    width: 50%;
  }
}
@media (max-width: 950px) {
  .dashboard-main-admin-container {
    flex-direction: column;
    align-items: center;
  }
  .dashboard-main-right-container {
    width: 80%;
  }
  .dashboard-main-right-admin-container {
    width: 80%;
  }
  .dashboard-main-left-container {
    margin-left: 0 !important;
    width: 50% !important;
  }
  .dashboard-main-left-admin-container {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .dashboard-main-right-container {
    width: 49% !important;
  }
  .dashboard-main-right-admin-container {
    width: 100% !important;
  }
  .user-panel-inner h1 {
    font-size: 1em;
  }
  .user-panel-inner h3 {
    font-size: 0.7em;
  }
}
@media (max-width: 800px) {
}
@media (min-width: 2000px) {
  .chart-subscription-container {
    flex-direction: row;
  }
  .subscriber-list {
    width: 50%;
  }
  .chart-section {
    width: 50%;
  }
  .bg-image1 {
    left: -200px;
    width: 200px;
  }
}
.custom-container {
  /* width: 100%; */
  /* max-width: 1140px; */
  /* margin: 0 auto; */
  /* margin-left: 10px; */
  padding: 20px 20px;
}
.layout-wrapper {
  display: flex;
  /* gap: 70px;  */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  /* padding: 24px;  */
  background: #7c3aed;
  border-radius: 24px;
  overflow: hidden;
  transition: height 0.3s ease;
}
.left-section {
  flex: 1 1;
  /* min-width: 300px;
  max-width: 480px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* gap: 16px; */
  width: 60%;
  height: 100%;
  padding: 40px;
}
.icon-container {
  width: 50%;
  /* height: 370px;  */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  /* margin-top: 30px; */
  padding: 24px 0px 0px 0px;
}
.icon {
  width: 60%;
  /* height: 100%; */
  object-fit: contain;
}
.welcome-text {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 24px;
  background: linear-gradient(90.45deg, #ffffff -2.93%, #d6ccff 104.49%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.description {
  margin-top: 2px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: #eee7f8;
}
.uploaded-dashboard-files-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.uploaded-dashboard-file {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
  gap: 6px;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 208px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #ffffff;
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}
.uploaded-dashboard-file-icon img {
  width: 22px;
  height: 22px;
}
.uploaded-dashboard-filename-container {
  width: 152px;
  height: 16px;
  display: flex;
  align-items: center;
}
.uploaded-dashboard-filename {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploaded-dashboard-close-icon {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}
.uploaded-dashboard-close-icon img {
  width: 16px;
  height: 16px;
}
.chat-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff14;
  box-shadow:
    0px 8px 10px -6px rgba(0, 0, 0, 0.1),
    0px 20px 25px -5px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
  border: 0.5px solid #ffffff30;
}
.job-details-box {
  border: 0.5px solid #ffffff76;
  border-radius: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
}
.job-details-input {
  width: 100%;
  min-height: 60px;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  background: transparent;
  color: white;
  outline: none;
  resize: none;
  ::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}
.job-details-input::placeholder {
  color: white;
}
.ask-me-anything-bar {
  border: 0.5px solid #ffffff76;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.ask-me-anything-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  width: 100%;
}
.ask-me {
  flex: 1 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: white;
}
.ask-me::placeholder {
  color: white;
}
input.ask-me:-webkit-autofill,
input.ask-me:-webkit-autofill:hover,
input.ask-me:-webkit-autofill:focus,
input.ask-me:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.015) inset !important;
  -webkit-text-fill-color: white !important;
  caret-color: white;
  -webkit-transition:
    background-color 9999s ease-out,
    color 9999s ease-out;
  transition:
    background-color 9999s ease-out,
    color 9999s ease-out;
}
.attach-icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
/* .start-chat-btn {
  background: white;
  color: #7C3AED;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid #7C3AED; 
} */
.ai-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* flex-wrap: wrap; */
  grid-gap: 20px;
  gap: 20px;
  padding: 20px;
  /* width: 100%;
  max-width: 1100px; 
  margin: 0 auto;*/
  justify-content: center;
}
.dashboard-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  /* margin: 32px 0 24px 0; */
  padding: 10px 20px;
}
.dashboard-main-content-top {
  display: grid;
  /* grid-template-columns: 2fr 1fr; */
  grid-gap: 24px;
  gap: 24px;
  margin-top: -20px;
  padding: 10px 20px;
  /* align-items: stretch;
  min-height: 400px;
  max-height: 80vh; */
}
.dashboard-main-content-top-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-top: -20px;
  margin-bottom: 45px;
  padding: 10px 20px;
}
.chartouter {
  display: grid;
  grid-template-columns: 1fr;
}
.dashboard-main-content-bottom {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 24px;
  gap: 24px;
  margin-top: 24px;
  padding: 10px 20px;
}
.dashboard-main-interview {
  background-color: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 20px;
  /* width: 35%; */
  max-height: 98%;
  overflow-y: auto;
  gap: 10px;
  margin: 20px;
  margin-right: 1px;
  margin-top: 0;
}
.dashboard-main-track {
  background-color: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  /* height: 95%; */
  padding: 10px 20px;
  gap: 10px;
  /* max-height: 600px; */
}
.dashboard-main-chart {
  background-color: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  max-height: 710px;
  height: 100%;
  padding: 10px 20px;
  gap: 10px;
}
.dashboard-main-chart-vendor {
  background-color: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  max-height: 435px;
  height: 100%;
  padding: 30px;
}
@media (max-width: 1024px) {
  .dashboard-main-chart-vendor {
    background-color: var(--card__background);
    border: 1px solid var(--card__border);
    border-radius: 20px;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    max-height: 850px;
    height: 100%;
    padding: 30px;
  }
}
.vendor-charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  width: 100%;
  padding-bottom: 20px;
}
.vendor-chart-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dashboard-main-job-chart {
  background-color: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  max-height: 617px;
  height: 100%;
  padding: 10px 20px;
  gap: 10px;
  margin: 20px;
  margin-top: -10px;
}
.dashboard-main-jobschart {
  background-color: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 20px;
  height: 100%;
}
.MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input {
  color: var(--header__color);
  /* border: 1px solid var(--card__border); */
}
.dashboard-main-left,
.dashboard-main-right {
  background: none;
  border: 1px #ddd;
  border-radius: 20px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.recent-section-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
  gap: 6px;
}
.recent-title-header-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.track-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  grid-column-gap: 10px;
  column-gap: 10px;
  grid-row-gap: 10px;
  row-gap: 10px;
  padding: 25px;
  margin-top: -30px;
}
@media (max-width: 981px) {
  .track-card-container {
    grid-template-columns: 1fr;
  }
}
h4.view-all-track-title {
  margin-bottom: 0;
  margin-top: 0;
  color: #6860ee;
  cursor: pointer;
}
.recent-history-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.section-title-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0px;
  gap: 6px;
}
.section-title-wrapper .section-title {
  text-align: center;
}
.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--header__color);
}
.calendar-section {
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  height: 600px;
}
.calendar-section-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 10px 0px;
  gap: 6px;
}
.calendar-section-wrapper-dice {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 10px 0px;
  gap: 6px;
  text-align: center;
}
.calendar-section .interview-event-container {
  padding: 12px 10px 16px 12px;
  border-radius: 10px;
  background: var(--body__background);
  border: 1px solid #e6e6e6;
  color: var(--header__color);
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
  box-shadow: none;
  gap: 20px;
}
.calendar-section .event-time {
  display: flex;
  gap: 4px;
  font-size: 14px;
  color: #4b5563;
  word-break: break-word;
  font-weight: 500;
}
.calendar-section .event-candidate {
  font-size: 14px;
}
.calendar-section .event-icon {
  opacity: 1;
}
.event-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.event-header-title {
  margin: 0;
  font-size: 18px;
  color: #6860ee;
  word-break: break-word;
  font-weight: 600;
  /* padding: 5px; */
}
.event-time-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-time-view p {
  margin: 0;
  font-size: 14px;
  color: #6860ee;
  word-break: break-word;
  font-weight: 500;
}
.view-meeting {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.no-tracking-history-text {
  font-size: 16px;
  color: #6860ee;
  word-break: break-word;
  font-weight: 600;
  text-align: center;
}
.no-pipeline-text {
  font-size: 16px;
  color: #6860ee;
  word-break: break-word;
  font-weight: 600;
  text-align: center;
}
.no-vendor-pipeline-text {
  font-size: 16px;
  color: #6860ee;
  word-break: break-word;
  font-weight: 600;
  text-align: center;
  margin-top: 15px;
}
.no-active-inactive-text {
  font-size: 16px;
  color: var(--header__color);
  word-break: break-word;
  font-weight: 600;
  text-align: center;
}
.dashboard-main-track .no-tracking-history {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.calendar-section .no-tracking-history {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-top: 30%;
}
.no-pipeline-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 70%;
}
.pipeline-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 80%;
}
@media screen and (min-width: 2560px) {
  .custom-container {
    /* max-width: 1970px; */
    max-width: 100%;
    padding: 32px 60px;
  }
  .layout-wrapper {
    height: 420px;
    padding: 48px;
    gap: 170px;
  }
  .left-section {
    max-width: 1100px;
    gap: 25px;
  }
  .icon-container {
    width: 440px;
    height: 440px;
  }
  .welcome-text {
    font-size: 48px;
    line-height: 56px;
  }
  .description {
    font-size: 20px;
    line-height: 30px;
  }
  .chat-card {
    max-width: 1000px;
    padding: 20px;
  }
  .job-details-input,
  .ask-me {
    font-size: 16px;
  }
  .cards-container {
    max-width: 100%;
    gap: 25px;
    padding: 40px;
  }
}
@media screen and (max-width: 1150px) {
  .cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
    max-width: 100%;
    height: auto;
    padding: 20px;
  }
  .left-section {
    padding: 0px 24px;
  }
  .layout-wrapper {
    padding: 14px;
  }
  .welcome-text {
    font-size: 22px;
  }
  .hearder-inner-container {
    width: 80%;
  }
}
@media screen and (max-width: 768px) {
  .dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
    /* margin: 32px 0 24px 0; */
    padding: 10px 20px;
  }
  .user-dashboard-header-main-container {
    border-bottom: none;
    margin: 10px;
  }
  .icon-container {
    display: none;
  }
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 768px) and (max-height: 620px) {
  .user-dashboard-header-main-container {
    border-bottom: none;
    padding: 30px 30px 1px 30px;
  }
}
@media (max-width: 576px) {
  .cards-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 385px) {
  .cephea-tentnt-text {
    font-size: 12px;
  }
  .cephea-text {
    font-size: 20px;
  }
}
@media (max-width: 1200px) {
  .dashboard-main-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dashboard-main-left,
  .dashboard-main-right {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}
@media (max-width: 991px) {
  .dashboard-main-content-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dashboard-main-content-top-full {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 10px;
  }
  .vendor-charts-container {
    grid-template-columns: 1fr;
  }
  .dashboard-main-chart-vendor {
    max-height: 1350px;
  }
}
@media (max-width: 700px) {
  .dashboard-main-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dashboard-main-left,
  .dashboard-main-right {
    padding: 0;
  }
}
.recharts-legend-wrapper {
  font-size: 15px !important;
}
.no-recent-tracks-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  box-sizing: border-box;
  text-align: center;
}
.react-datepicker__input-container input {
  display: none !important;
}
.calendar-date-wrapper:hover .calender-toolbar-label {
  background-color: transparent !important;
}
.no-recent-tracking-history {
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
@media (min-width: 915px) and (max-width: 1024px) {
  .dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
}
@media (min-width: 1025px) and (max-width: 1160px) {
  .dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 2.5rem !important;
    line-height: 1.2;
  }
}
@media (min-width: 860px) and (max-width: 1024px) {
  .dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
  }
  .dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 1.8rem !important;
    line-height: 1.2;
  }
}
@media (min-width: 769px) and (max-width: 859px) {
  .dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
  }
  .dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 1.5rem !important;
    line-height: 1.2;
    display: grid;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .dashboard-main-interview {
    /* margin-top: 24px; */
  }
}
@media (min-width: 992px) and (max-width: 1130px) {
  .dashboard-main-interview .event-time-view {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 425px) and (max-width: 768px) {
  .dashboard-metrics-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    gap: 20px;
    margin-top: 25px;
  }
  .dashboard-main-content-top {
    gap: 60px;
  }
  .dashboard-main-content-bottom {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 320px) and (max-width: 424px) {
  .dashboard-metrics-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    gap: 20px;
    margin-top: 25px;
  }
  .dashboard-main-content-top {
    gap: 60px;
  }
  .dashboard-main-content-bottom {
    display: grid;
    grid-template-columns: 1fr;
  }
  .dashboard-main-content-top-full {
    display: block;
    gap: 24px;
    margin-top: 24px;
    padding: 10px 20px;
  }
  .dashboard-main-content-top {
    /* margin-top: 24px; */
    padding: 10px 10px;
    display: grid;
    grid-template-columns: 1fr;
  }
}
.combined-legend-container {
  padding: 16px;
}
.combined-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.legend-label {
  font-size: 14px;
  color: var(--header__color);
  font-family: "Satoshi", sans-serif;
}
.filter-pills-container {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid #6860ee;
  font-size: 14px;
  line-height: 1.2;
}
.filter-pill-value {
  color: #6860ee;
  font-weight: 600;
}

.track-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--card__background);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    min-width: 260px;
    border: 1px solid var(--card__border);
  }
  
  .track-card-left {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    font-weight: 600;
    font-size: 1rem;
  }
  
  .track-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .track-date {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color-accent);
  }
  
  .recent-track-stage {
    font-size: 0.85rem;
    color: #888;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: 50px;
    width: -webkit-fit-content;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    display: block;
    margin-top: 6px;
    margin-bottom: 15px;
  }

  .track-stage {
    font-size: 0.85rem;
    color: #888;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: 50px;
    width: -webkit-fit-content;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    display: block;
    margin-top: 6px;
    margin-bottom: 20px;
  }

  .track-candidate-name {
    margin-bottom: 15px;
  }

  .date-container-wrapper {
    display: flex;
    gap: 10px;
  }

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

.recent-history-icons {
  width: 18px;  
  height: 18px;
  padding: 5px;
}

.public-board-page {
  min-height: 100vh;
  background: var(--body__background);
  color: var(--text__color);
}

.public-board-content {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.public-board-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.public-board-eyebrow {
  margin: 0;
  color: #6860ee;
  font-size: 14px;
  font-weight: 700;
}

.public-board-heading h1 {
  margin: 0;
  color: var(--header__color);
  font-size: 32px;
  font-weight: 700;
}

.public-board-heading span {
  color: var(--text-color-accent);
  font-size: 15px;
  font-weight: 600;
}

.public-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 18px;
  gap: 18px;
}

.public-board-grid .jobs-card-container {
  background-color: var(--card__background);
  border-radius: 16px;
  padding: 8px 16px 16px;
  box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.public-board-grid .jobs-card-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.public-board-grid .jobs-card-header {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--card__border);
  padding: 10px 0;
  align-items: center;
  text-align: left;
  width: 100%;
  justify-content: space-between;
}

.public-board-grid .job-header-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.public-board-grid .jobs-card-title {
  margin: 0;
  color: var(--header__color);
  font-size: 18px;
  font-weight: 600;
}

.public-board-grid .job-headers-spans {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.public-board-grid span.headers-client-span {
  color: var(--text-color-accent);
  font-size: 14px;
  font-weight: 500;
}

.public-board-grid .jobs-card-info {
  display: flex;
  color: var(--text-color-accent);
  font-size: 1rem;
  align-items: center;
  gap: 30px;
  padding: 10px 0;
}

.public-board-grid .jobs-card-info div {
  display: flex;
  align-items: center;
}

.public-board-grid .jobs-card-info-details {
  display: flex;
  gap: 5px;
}

.public-board-grid .jobs-card-info-details span {
  color: var(--text-color-accent);
  font-weight: 600;
  text-align: left;
}

.public-board-grid .jobs-card-header img {
  width: 25px;
}

.public-board-grid .jobs-card-info img {
  width: 22px;
}

.public-board-grid .jobs-card-action {
  cursor: pointer;
  display: flex;
  gap: 15px;
}

.public-board-grid .jobs-card-action .view-job,
.public-board-grid .jobs-card-action .apply-job {
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.public-board-state,
.public-board-message {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-apply-upload-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 25px;
}

.public-apply-file-wrapper {
  border: 2px dashed #6860ee;
  border-radius: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.public-apply-file-wrapper.drag-active {
  background-color: rgba(104, 96, 238, 0.08);
  border-color: #827cff;
}

.public-apply-file-input {
  display: none;
}

.public-apply-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  cursor: pointer;
  color: #6860ee;
  text-align: center;
}

.public-apply-drop-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.public-apply-drop-info small {
  color: var(--text-color-accent);
  font-size: 12px;
  font-weight: 400;
}

.public-apply-drag-icon {
  width: 42px;
  height: 42px;
}

.public-apply-file-name-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background-color: var(--body__background);
  border-radius: 8px;
}

.public-apply-file-name {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: #6a69eb;
  font-size: 14px;
  font-weight: 600;
}

.public-apply-file-name img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.public-apply-file-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-apply-custom-fields-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
}

.public-apply-custom-field {
  width: 100%;
}

.public-apply-custom-field-error {
  color: #ff0000;
  font-size: 13px;
  margin-top: 4px;
}

.public-apply-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 4px;
}

.public-board-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--text-color-accent);
  font-weight: 600;
  min-height: calc(80vh - 88px);
  border: 1px solid var(--text-color-accent);
  border-radius: 15px;
}

.public-board-empty p,
.public-board-message {
  margin: 0;
  color: var(--text-color-accent);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 768px) {
  .public-board-content {
    width: calc(100% - 28px);
    padding-top: 28px;
  }

  .public-board-heading h1 {
    font-size: 28px;
  }

  .public-board-grid {
    grid-template-columns: 1fr;
  }

  .public-board-grid .jobs-card-action .view-job,
  .public-board-grid .jobs-card-action .apply-job {
    font-size: 0.9rem;
    padding: 6px 12px;
  }

  .popupinner-container {
    width: 86vw !important;
  }
}

@media (max-width: 480px) {
  .public-board-grid .jobs-card-info,
  .public-board-grid .jobs-card-action {
    flex-wrap: wrap;
  }

  .public-board-grid .jobs-card-action .view-job,
  .public-board-grid .jobs-card-action .apply-job {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}
.notifications-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  background: var(--body__background);
  color: var(--header__color);
  overflow: hidden;
}

.notifications-page .header-main-container {
  background: var(--body__background);
  border-bottom: 1px solid var(--header-border__color);
  height: auto;
  min-height: 59px;
}

.notifications-page .header-icon-title-container {
  /* gap: 10px; */
  min-width: 0;
  margin-left: 5px ;
}

.notifications-page .header-icon-title-container h2 {
  color: var(--header__color);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
}

.notifications-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--body__background);
  width: 100%;
  box-sizing: border-box;
}

.notifications-toolbar,
.notifications-filter-group {
  min-width: 0;
}

.notifications-mark-action {
  flex-shrink: 0;
}

@media (min-width: 1600px) {
  .notifications-content {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 1024px) {
  .notifications-page .header-main-container {
    padding: 10px 18px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .notifications-page .header-icon-title-container {
    margin-left: 10px;
  }
}

@media (max-width: 768px) {
  .notifications-page .header-main-container {
    
    gap: 12px;
    padding: 10px 10px;
    margin-top: 10px;
  }

  .notifications-page .header-icon-title-container {
    justify-content: flex-start;
  }

  .notifications-page .notfication-button-container {
    width: auto;
  }

  .notifications-page .notfication-button-container button {
    width: auto !important;
  }

  .notifications-content {
    padding: 16px !important;
  }

  /* .notifications-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  } */

  .notifications-filter-group {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .notifications-mark-action,
  .notifications-mark-action button {
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .notifications-page .header-main-container {
    padding: 10px 12px;
    margin-top: 15px;
  }

  /* .notifications-page .header-icon-title-container {
    gap: 8px;
  } */

  .notifications-page .notfication-button-container {
    align-self: stretch;
    display: flex;
    justify-content: center;
  }

  .notifications-page .header-icon-title-container h2 {
    font-size: 20px;
  }

  .notifications-content {
    padding: 12px !important;
    gap: 12px !important;
  }

  .notifications-filter-group button {
    flex: 1 1;
    min-width: 0;
  }

  .notifications-mark-action {
    align-self: center;
  }
}

 .member-dashboard-header-main-container {
     display: flex;
     gap: 10px;
     align-items: start;
     color: var(--header__color);
     top: 0;
     z-index: 9;
     justify-content: space-between;
     margin-bottom: -20px;
 }

 .hearder-inner-container {
     justify-content: space-between;
     align-items: center;
     width: 50%;
 }

 .cephea-span-container {
     display: flex;
     gap: 10px;
     justify-content: flex-start;
     align-items: center;
 }

 .member-dashboard-tenant-name {
     display: flex;
     gap: 10px;
     justify-content: end;
     align-items: center;
     width: 700px;
 }

 h3.cephea-tentnt-text {
     color: #6860ee;
     margin: 0;
 }

 .dashboard-notification-icon-container {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }

 .dashboard-notification-badge {
     position: absolute;
     top: -5px;
     right: -6px;
     min-width: 16px;
     height: 16px;
     padding: 0 4px;
     border-radius: 999px;
     background-color: #6963ec;
     color: #ffffff;
     font-size: 10px;
     font-weight: 700;
     line-height: 16px;
     text-align: center;
     box-sizing: border-box;
 }

 .cephea-text {
     color: #6860ee;
     margin: 0;
     font-size: 35px;
 }

 .member-dashboard-table-content {
     margin-top: 20px;
 }

 .member-dashboard-table-pipeline {
     width: 100%;
     height: 100%;
     overflow: visible;
     border-radius: 0 0 16px 16px !important;
     background: transparent;
 }

 .member-dashboard-table-pipeline .global-table-wrapper {
     width: 100%;
     overflow: visible;
 }

 .member-dashboard-table-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 54px;
     margin: 0;
     padding: 0 16px;
     border: 1px solid var(--border__color);
     border-bottom: 0;
     border-radius: 16px 16px 0 0;
     background: var(--table__background);
 }

 .member-dashboard-table-heading>div {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
 }

 .member-dashboard-table-heading h3 {
     margin: 0;
     color: var(--header__color);
     font-size: 15px;
     font-weight: 600;
     line-height: 1.2;
 }

 .member-dashboard-candidate-total-rows {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 18px;
     padding: 2px 8px;
     border-radius: 999px;
     background: var(--filter-button);
     color: #71809a;
     color: var(--admin-dashboard-muted, #71809a);
     font-size: 11px;
     font-weight: 500;
     line-height: 1;
     white-space: nowrap;
 }

 @media screen and (max-width: 768px) {

     .user-dashboard-header-main-container {
         border-bottom: none;
         margin: 10px;
     }

     .member-dashboard-table-heading {
         display: flex;
         min-height: auto;
         flex-wrap: wrap;
         gap: 12px;
         padding: 12px 10px;
     }
 }

 @media (max-width: 1100px) {
     .member-dashboard-tenant-name {
         width: 50%;
     }
 }

 @media (max-width: 768px) {
     .hearder-inner-container {
         width: 80%;
     }
 }

 @media screen and (max-width: 768px) and (max-height: 620px) {
     .user-dashboard-header-main-container {
         border-bottom: none;
         padding: 30px 30px 1px 30px;
     }
 }

 @media screen and (max-width: 385px) {
     .cephea-tentnt-text {
         font-size: 12px;
     }

     .cephea-text {
         font-size: 20px;
     }
 }

 .member-dashboard-view-candidate-loader {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 75vh;
 }

 .member-dashboard-month-filter {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }

 .member-dashboard-divider {
     font-size: 30px;
     font-weight: lighter;
     color: var(--border__color);
 }

 .hello-icon {
     height: 30px;
     margin-left: 5px;
 }

 .member-dashboard-fallbacks {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
 }
 .member-dashboard-fallback-text {
    color: #71809a;
 }
 .member-dashboard-fallback-img{
    width: 100px;
 }
.notification-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
}

.notification-popup {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 380px;
  max-height: 400px;
  background: var(--body__background);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  pointer-events: all;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cards-border);
  overflow: hidden;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cards-border);
}

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

.header-left h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
}

.unread-badge {
  background: #6860ee;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

.mark-all-read-btn {
  background: transparent;
  border: none;
  color: #6860ee;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s;
}

.mark-all-read-btn:hover:not(:disabled) {
  background: rgba(104, 96, 238, 0.1);
}

.mark-all-read-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.notification-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px 0;
  max-height: 400px;
}

.notification-list::-webkit-scrollbar {
  width: 4px;
}

.notification-list::-webkit-scrollbar-thumb {
  background: var(--cards-border);
  border-radius: 10px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  gap: 12px;
  border-bottom: 1px solid var(--cards-border);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--hover-background);
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.notification-application-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.notification-content {
  flex: 1 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--header__color);
  margin-bottom: 2px;
}

.notification-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.job-title {
  color: #6860ee;
  font-weight: 500;
}

.meta-separator {
  color: var(--text-secondary);
}

.candidate-name {
  color: var(--header__color);
}

.notification-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.empty-notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-notifications p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--header__color);
}

.empty-subtext {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.notification-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--cards-border);
  text-align: center;
}

.view-all-btn {
  background: transparent;
  border: none;
  color: #6860ee;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  transition: all 0.2s;
  font-family: "Satoshi", sans-serif;
}

.view-all-btn:hover {
  background: rgba(104, 96, 238, 0.1);
  border-radius: 6px;
}

@media (max-width: 480px) {
  .notification-popup {
    width: calc(100% - 20px);
    right: 10px;
    top: 60px;
    max-height: 500px;
  }

  .notification-item {
    padding: 10px 12px;
  }
}

.pipeline-status-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 16px;
  border-radius: 8px;
}

.pipeline-status-row {
  display: grid;
  grid-template-columns: 150px 1fr 40px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
}

.pipeline-status-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--header__color);
  white-space: nowrap;
}

.pipeline-status-bar-container {
  background-color: var(--tab__background);
  height: 27px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.pipeline-status-bar {
  height: 28%;
  border-radius: 4px;
  background-color: #6860EE;
  transition: width 0.3s ease;
}

.pipeline-status-count {
  font-size: 14px;
  font-weight: bold;
  color: var(--header__color);
  text-align: right;
}

.admin-dashboard-header-main-container {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 10px 30px;
  align-items: center;
  color: var(--header__color);
  top: 0;
  z-index: 100;
  justify-content: space-between;
  margin-bottom: -40px;
}

.dashboard-container {
  width: 100%;
  background-color: var(--body__background);
}

.admin-dashboard-header-main-container > .hearder-inner-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.cephea-span-container {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}

.admin-dashboard-header-main-container .cephea-span-container-tenant-name,
.admin-cephea-span-container-tenant-name {
  display: flex;
  gap: 10px;
  justify-content: end;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-top: -120px;
  min-width: -webkit-max-content;
  min-width: max-content;
  white-space: nowrap;
}

.admin-dashboard-tenant-logo-shell {
  width: 86px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
  flex: 0 0 86px;
}

.admin-dashboard-tenant-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cephea-text {
  color: #6860ee;
  margin: 0;
  font-size: 35px;
}

.hello-icon {
  height: 30px;
  margin-left: 5px;
}
.dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    gap: 20px;
    padding: 10px 20px;
}

.admin-dashboard-header-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(334px, 334px);
  align-items: start;
  grid-gap: 16px;
  gap: 16px;
  width: 100%;
  margin-left: auto;
  padding: 0;
}

.admin-dashboard-header-client-filter,
.admin-dashboard-header-recruiter-filter {
  min-width: 0;
}

.admin-dashboard-header-recruiter-filter {
  min-width: 334px;
  position: relative;
  z-index: 101;
}

.admin-dashboard-header-client-filter .MuiAutocomplete-root,
.admin-dashboard-header-recruiter-filter .dropdown-container {
  width: 100% !important;
}

.admin-dashboard-header-client-filter .MuiInputBase-root {
  height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background: var(--body__background, #ffffff) !important;
}

.admin-dashboard-header-client-filter .MuiOutlinedInput-notchedOutline {
  border-color: #dfe5f2 !important;
  border-color: var(--border__color, #dfe5f2) !important;
}

.admin-dashboard-header-client-filter .MuiAutocomplete-popupIndicator,
.admin-dashboard-header-recruiter-filter
  .dropdown-container
  > .MuiSvgIcon-root {
  width: 28px !important;
  height: 28px !important;
  padding: 2px !important;
  border-radius: 50% !important;
  color: var(--header__color) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease !important;
}

.admin-dashboard-header-client-filter .MuiAutocomplete-popupIndicator:hover,
.admin-dashboard-header-recruiter-filter
  .dropdown-container
  > .MuiSvgIcon-root:hover {
  background-color: rgba(104, 96, 238, 0.12) !important;
  color: var(--header__color) !important;
}

.admin-dashboard-header-recruiter-filter .dropdown-textfield,
.admin-dashboard-header-recruiter-filter .dropdown-textfield input {
  border-radius: 999px !important;
  cursor: pointer !important;
  margin-left: 0 !important;
}

.admin-dashboard-header-recruiter-filter .dropdown-menu {
  left: 0 !important;
  top: 48px !important;
  z-index: 1000 !important;
  border-top: 1px solid var(--border__color) !important;
}

h3.cephea-tentnt-text {
  color: #6860ee;
  margin: 0;
  white-space: nowrap;
}

.admin-dashboard-metrics-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
  gap: 20px;
  padding: 10px 20px;
}

.admin-dashboard-table-content {
  padding: 0 20px;
}

.admin-dashboard-table-pipeline {
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
}

.admin-dashboard-table-pipeline .global-table-wrapper {
  width: 100%;
  overflow: visible;
}

.admin-dashboard-funnel-pipeline {
  width: 100%;
  border: 1px solid var(--border__color);
  border-radius: 16px;
  background: var(--table__background);
}

.admin-section-header {
  padding: 10px 20px;
}

.admin-section-title-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0px;
  gap: 6px;
}

.admin-section-title-wrapper .section-title {
  text-align: center;
}

.admin-dashboard-performance-header {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(560px, 1.75fr);
  align-items: start;
  grid-gap: 24px;
  gap: 24px;
  width: 100%;
}

.admin-dashboard-performance-copy {
  min-width: 0;
  padding-top: 2px;
}

.admin-dashboard-performance-copy .admin-section-title-wrapper {
  padding-top: 0;
}

.admin-dashboard-date-range-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin: 2px 0 0;
}

.admin-dashboard-performance-date-filter {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.admin-dashboard-date-range-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 12px;
  min-height: 40px;
  min-width: 276px;
  padding: 0 22px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 999px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: #071329;
  color: var(--header__color, #071329);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  cursor: default;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.admin-dashboard-date-range-pill svg {
  flex: 0 0 auto;
  color: #071329;
}

.admin-dashboard-date-range-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-dashboard-dark .admin-dashboard-date-range-pill svg {
  color: var(--header__color);
}

.admin-stats-subtitle {
  color: var(--page_Header_Color);
  font-size: 16px;
  font-weight: 500;
}

.admin-recruiter-header {
  padding: 10px 20px;
}

.admin-recruiter-title-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0px;
  gap: 6px;
}

.admin-recruiter-title-wrapper .section-title {
  text-align: center;
}

.admin-recruiter-stats-subtitle {
  color: var(--page_Header_Color);
  font-size: 16px;
  font-weight: 500;
}

.admin-dashboard-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--border__color);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--table__background);
}

.admin-dashboard-table-heading > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-dashboard-table-heading h3 {
  margin: 0;
  color: var(--header__color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.admin-dashboard-table-heading span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--filter-button);
  color: #71809a;
  color: var(--admin-dashboard-muted, #71809a);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.admin-dashboard-table-heading::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border__color);
  border-radius: 8px;
  color: #71809a;
  color: var(--admin-dashboard-muted, #71809a);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.admin-dashboard-dark {
  background: var(--body__background);
  color: var(--header__color);
}

.admin-dashboard-actions img {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  margin-right: 10px;
}

.admin-dashboard-api-message {
  margin: 0 2px 12px;
  padding: 10px 14px;
  border: 1px solid var(--border__color);
  border-radius: 10px;
  background: var(--information_Note_Background);
  color: var(--job-Description_Color);
  font-size: var(--admin-dashboard-small-text-size);
  font-weight: 700;
}

.admin-dashboard-recruiter-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  padding: 0 25px;
  margin-bottom: 30px;
}

.admin-dashboard-table-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border__color);
  border-radius: 16px;
  background: var(--table__background);
  border-radius: 16px;
  background: var(--table__background);
}

.admin-dashboard-table-header {
  /* display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border__color); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin: 0;
  padding: 0 16px;
  /* border: 1px solid var(--border__color); */
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--table__background);
}

.admin-dashboard-table-header h3 {
  margin: 0;
  color: var(--header__color);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.admin-dashboard-table-header span {
  display: block;
  margin-top: 6px;
  color: #71809a;
  color: var(--admin-dashboard-muted, #71809a);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.admin-dashboard-funnel-card {
  grid-column: 1 / -1;
  padding: 26px 18px 24px;
  border-color: #dfe7f2;
  border-radius: 18px;
  background: #ffffff;
}

.admin-dashboard-funnel-header {
  /* display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin: 0;
  padding: 0 16px;
  /* border: 1px solid var(--border__color); */
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--table__background);
}

.admin-dashboard-funnel-header h3 {
  margin: 0;
  color: #071329;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.admin-dashboard-funnel-header span {
  display: block;
  margin-top: 6px;
  color: #7186a8;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.admin-dashboard-funnel-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  height: 350px;
  overflow-y: auto;
}

.admin-dashboard-funnel-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 72px;
  align-items: center;
  grid-gap: 20px;
  gap: 20px;
}

.admin-dashboard-fallback-text {
  color: #71809a;
}

.admin-dashboard-funnel-stage {
  overflow: hidden;
  color: #7890ad;
  font-size: 13px;
  /* font-weight: 400; */
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-funnel-track {
  height: 32px;
  min-width: 0;
}

.admin-dashboard-funnel-bar {
  height: 32px;
  min-width: 26px;
  border-radius: 8px;
}

.admin-dashboard-funnel-count {
  color: #071329;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.admin-dashboard-dark .admin-dashboard-funnel-card {
  border-color: var(--border__color);
  background: var(--table__background);
}

.admin-dashboard-dark .admin-dashboard-funnel-header h3,
.admin-dashboard-dark .admin-dashboard-funnel-count {
  color: var(--header__color);
}

.admin-dashboard-dark .admin-dashboard-funnel-header span,
.admin-dashboard-dark .admin-dashboard-funnel-stage {
  color: #8c98ad;
  color: var(--admin-dashboard-muted, #8c98ad);
}

.admin-dashboard-workload-card {
  min-width: 0;
}

.admin-dashboard-loader-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 20px;
}

.admin-dashboard-workload-card .pipeline-status-container {
  max-height: 350px;
  overflow-y: auto;
  gap: 18px;
  padding: 18px 20px 24px;
}

.admin-dashboard-workload-card .pipeline-status-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.admin-dashboard-workload-card .pipeline-status-label {
  overflow: hidden;
  color: var(--header__color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-workload-card .pipeline-status-bar-container {
  width: 100%;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
}

.admin-dashboard-workload-card .pipeline-status-bar {
  height: 100%;
  min-width: 78px;
  border-radius: 999px;
}

.admin-dashboard-workload-card .pipeline-status-count {
  align-self: flex-end;
  color: var(--header__color);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-dashboard-empty-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  padding: 20px;
  color: var(--admin-dashboard-muted);
  font-size: var(--admin-dashboard-small-text-size);
  font-weight: 700;
  text-align: center;
}

.admin-dashboard-empty-img {
  width: 100px;
  max-width: 45%;
  height: auto;
}

.admin-dashboard-empty-text {
  color: var(--text_color);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.admin-dashboard-fallbacks {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.admin-dashboard-fallback-img {
  width: 100px;
}

.admin-dashboard-pipeline-table {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
}

.admin-dashboard-pipeline-table .rdt_Table {
  overflow: hidden;
  border: 1px solid var(--border__color);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: var(--table__background);
}

.admin-dashboard-pipeline-table .rdt_TableHeadRow {
  min-height: 48px;
  border-bottom-color: var(--border__color);
}

.admin-dashboard-pipeline-table .rdt_TableRow {
  min-height: 43px;
  border-bottom-color: var(--border__color);
}

.admin-dashboard-pipeline-table .rdt_TableBody .rdt_TableRow,
.admin-dashboard-pipeline-table .rdt_TableBody .rdt_TableCell {
  background-color: var(--table__background) !important;
}

.admin-dashboard-pipeline-table .rdt_TableCell,
.admin-dashboard-pipeline-table .rdt_TableBody .rdt_TableCell {
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.admin-dashboard-pipeline-table .rdt_Pagination {
  justify-content: flex-end !important;
  min-height: 34px;
  padding: 6px 10px 0 0;
  background: transparent !important;
  color: var(--header__color) !important;
  border-top: 0 !important;
}

.admin-dashboard-dark .admin-dashboard-pipeline-table .rdt_Table,
.admin-dashboard-dark
  .admin-dashboard-pipeline-table
  .rdt_TableBody
  .rdt_TableRow,
.admin-dashboard-dark
  .admin-dashboard-pipeline-table
  .rdt_TableBody
  .rdt_TableCell {
  background-color: var(--table__background) !important;
}

.admin-dashboard-dark .admin-dashboard-pipeline-table .rdt_TableRow {
  color: var(--header__color) !important;
}

.admin-dashboard-job-cell {
  min-width: 0;
  max-width: 100%;
}

.admin-dashboard-recruiter-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.admin-dashboard-recruiter-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--filter-button);
  color: var(--admin-dashboard-accent);
  font-size: 10px;
  font-weight: 800;
}

.admin-dashboard-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 92px;
  color: var(--admin-dashboard-muted);
  font-size: var(--admin-dashboard-small-text-size);
  font-weight: 500;
}

@media screen and (max-width: 385px) {
  .cephea-tentnt-text {
    font-size: 12px;
  }
  .cephea-text {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .admin-dashboard-table-heading {
    display: flex;
    min-height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 10px;
  }
  .admin-dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
    /* margin: 32px 0 24px 0; */
    padding: 10px 20px;
  }

  .admin-dashboard-header-main-container {
    border-bottom: none;
    margin: 10px;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
  }

  .admin-dashboard-header-main-container > .hearder-inner-container {
    width: 100%;
  }

  .admin-dashboard-header-filters {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
  }

  .admin-dashboard-performance-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .admin-dashboard-date-range-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .admin-dashboard-performance-date-filter,
  .admin-dashboard-date-range-pill {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .admin-dashboard-header-recruiter-filter {
    min-width: 0;
  }

  .admin-dashboard-header-main-container .cephea-span-container-tenant-name,
  .admin-cephea-span-container-tenant-name {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .admin-stats-subtitle {
    margin-left: 0;
    /* text-align: center; */
  }

  .admin-dashboard-recruiter-layout {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-funnel-card {
    padding: 18px 14px;
  }
  .admin-dashboard-funnel-row {
    grid-template-columns: 64px minmax(0, 1fr) 54px;
    gap: 10px;
  }

  .admin-dashboard-funnel-count {
    font-size: 13px;
  }
}

@media screen and (max-width: 768px) and (max-height: 620px) {
  .admin-dashboard-header-main-container {
    border-bottom: none;
    padding: 30px 30px 1px 30px;
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .admin-dashboard-header-main-container .cephea-span-container-tenant-name,
  .admin-cephea-span-container-tenant-name {
    width: 50%;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .admin-dashboard-header-main-container {
    flex-direction: column;
    align-items: stretch;
    margin: 10px;
    margin-bottom: 0;
    padding: 16px 20px;
  }

  .admin-dashboard-header-main-container > .hearder-inner-container {
    width: 100%;
  }

  .admin-dashboard-header-main-container .cephea-span-container-tenant-name {
    position: absolute;
    top: 16px;
    right: 34px;
    z-index: 2;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    margin-top: 0;
  }

  .admin-dashboard-header-filters {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    margin-left: 0;
    margin-bottom: 18px;
  }

  .admin-dashboard-performance-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .admin-dashboard-header-recruiter-filter {
    min-width: 0;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .admin-dashboard-header-main-container .cephea-span-container-tenant-name {
    position: absolute;
    top: 16px;
    right: 32px;
    z-index: 2;
    display: flex;
    width: auto;
    max-width: none;
    margin-top: 0;
  }

  .admin-dashboard-header-main-container
    .cephea-span-container-tenant-name
    > div:not(.dashboard-notification-icon-container),
  .admin-dashboard-header-main-container .cephea-tentnt-text {
    display: none;
  }

  .admin-dashboard-header-main-container
    .dashboard-notification-icon-container {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .admin-dashboard-header-main-container {
    gap: 12px;
    padding: 10px 25px;
    display: flex;
    align-items: baseline;
  }

  .admin-dashboard-header-main-container > .hearder-inner-container {
    width: auto;
  }

  .admin-dashboard-header-main-container .cephea-span-container-tenant-name {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .admin-dashboard-header-filters {
    column-gap: 18px;
    row-gap: 12px;
  }

  .admin-dashboard-performance-date-filter .month-filter__option {
    padding: 0 8px;
    font-size: 12px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1180px) {
  .admin-dashboard-header-main-container {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
  }

  .admin-dashboard-header-main-container > .hearder-inner-container {
    width: 100%;
  }

  .admin-dashboard-header-main-container .cephea-span-container-tenant-name {
    position: absolute;
    top: 16px;
    right: 34px;
    z-index: 2;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    margin-top: 0;
  }

  .admin-dashboard-header-filters {
    grid-template-columns: minmax(290px, 1.2fr) minmax(170px, 0.9fr);
    column-gap: 18px;
    row-gap: 12px;
  }

  .admin-dashboard-header-recruiter-filter {
    grid-column: 1 / -1;
    width: 334px;
    max-width: 100%;
  }
}

@media (min-width: 915px) and (max-width: 1024px) {
  .admin-dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
}
@media (min-width: 1025px) and (max-width: 1160px) {
  .admin-dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 2.5rem !important;
    line-height: 1.2;
  }
}
@media (min-width: 860px) and (max-width: 1024px) {
  .admin-dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
  }
  .admin-dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 1.8rem !important;
    line-height: 1.2;
  }
}
@media (min-width: 769px) and (max-width: 859px) {
  .admin-dashboard-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    gap: 20px;
  }
  .admin-dashboard-metrics-row .metric-card .css-1gq6ti9 {
    font-size: 1.5rem !important;
    line-height: 1.2;
    display: grid;
  }
}

@media (min-width: 425px) and (max-width: 768px) {
  .admin-dashboard-metrics-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    gap: 20px;
    margin-top: 25px;
  }
}

@media (min-width: 320px) and (max-width: 424px) {
  .admin-dashboard-metrics-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    gap: 20px;
    margin-top: 25px;
  }
}
.admin-dashboard-table-hover-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;
  border-radius: 14px;

  color: inherit;
  transition: 0.2s ease;
}
.admin-dashboard-table-hover-number:hover {
  background: var(--table-row-hover-number-background);
  color: var(--table-row-hover-number-color);
}
.admin-dashboard-table-not-hover-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;
  border-radius: 14px;

  color: inherit;
  transition: 0.2s ease;
}

.admin-dashboard-pipeline-table .rdt_TableBody .rdt_TableRow:hover {
  background-color: var(--table-row-hover) !important;
}
.admin-dashboard-pipeline-table .rdt_TableBody .rdt_TableRow:hover,
.admin-dashboard-pipeline-table
  .rdt_TableBody
  .rdt_TableRow:hover
  .rdt_TableCell {
  background-color: var(--table-row-hover) !important;
}

.admin-dashboard-custom-date-filter-popup {
  width: 520px;
  padding: 18px 20px;
}

.admin-dashboard-custom-date-filter-popup .stage-filter-controls {
  align-items: center;
  gap: 18px;
}

.admin-dashboard-custom-date-filter-popup .filter-label {
  width: 132px;
}

.admin-dashboard-custom-date-filter-popup .stage-date-range-wrapper {
  flex: 1 1 auto;
  width: auto;
}

.admin-dashboard-custom-date-filter-popup .stage-date-range-control {
  min-width: 118px;
}

@media screen and (max-width: 640px) {
  .admin-dashboard-custom-date-filter-popup .stage-filter-controls,
  .admin-dashboard-custom-date-filter-popup .stage-date-range-wrapper {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-dashboard-custom-date-filter-popup .filter-label,
  .admin-dashboard-custom-date-filter-popup .stage-date-range-wrapper {
    width: 100%;
  }

  .admin-dashboard-custom-date-filter-popup .stage-date-range-separator {
    display: none;
  }
}

.super-admin-dashboard {
  width: 100%;
  box-sizing: border-box;
}

.super-admin-header {
  width: 100%;
  min-height: 100px;
  padding: 20px 28px 18px 16px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--body__background);
}

.super-admin-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.super-admin-greeting {
  display: flex;
  align-items: center;
  gap: 7px;
}

.super-admin-greeting h1 {
  margin: 0;

  font-family: "Satoshi", sans-serif;
  font-size: 27px;
  line-height: 32px;
  font-weight: 700;

  color: var(--header__color);
}

.super-admin-hello-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.super-admin-header-left p {
  margin: 5px 0 0 0;

  font-family: "Satoshi", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;

  color: var(--super-admin-header-left);
}

.super-admin-header-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.super-admin-notification-container {
  position: relative;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.super-admin-notification-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.super-admin-notification-badge {
  position: absolute;
  top: -4px;
  right: -5px;

  min-width: 17px;
  height: 17px;
  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: #ee343b;
  color: #ffffff;

  font-family: "Satoshi", sans-serif;
  font-size: 10px;
  font-weight: 700;

  box-sizing: border-box;
}

.super-admin-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.super-admin-logo {
  width: 48px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.super-admin-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.super-admin-role {
  font-family: "Satoshi", sans-serif;
  font-size: 12px;
  line-height: 15px;
  font-weight: 700;

  color: #8b8b8b;
  letter-spacing: 0.3px;
}

.super-admin-company {
  margin-top: 1px;

  font-family: "Satoshi", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;

  color: #6860ee;
}

.super-admin-body {
  padding: 0 20px;
}

.super-admin-platform-activity {
  width: 100%;
  margin-top: 24px;
}

.super-admin-platform-activity h2 {
  margin: 0 0 18px 0;

  font-family: "Satoshi", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;

  color: var(--header__color);
}

.super-admin-activity-card {
  width: 100%;

  border: 1px solid #e3e3e3;

  border: 1px solid var(--border__color, #e3e3e3);
  border-radius: 14px;

  overflow: hidden;

  background: #ffffff;

  background: var(--body__background, #ffffff);
}

.super-admin-activity-tabs {
  height: 48px;

  display: flex;
  align-items: stretch;

  gap: 24px;

  padding-left: 18px;

  border-bottom: 1px solid #e3e3e3;

  border-bottom: 1px solid var(--border__color, #e3e3e3);
}

.super-admin-activity-tab {
  position: relative;

  border: none;
  background: transparent;

  padding: 0 4px;

  font-family: "Satoshi", sans-serif;
  font-size: 14px;
  font-weight: 500;

  color: #858895;

  cursor: pointer;
}

.super-admin-activity-tab.active {
  color: #171b2c;
  color: var(--header__color, #171b2c);
}

.super-admin-activity-tab.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 2px;

  background: #6860ee;

  border-radius: 2px 2px 0 0;
}

.super-admin-activity-tab:disabled {
  cursor: default;
}

.super-admin-tenant-cell {
  display: flex;
  align-items: center;

  gap: 12px;

  width: 100%;
}

.super-admin-tenant-avatar {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--super-admin-tenant-avatar-bg);
  border: 1px solid var(--super-admin-tenant-avatar-border);

  font-family: "Satoshi", sans-serif;
  font-size: 12px;
  font-weight: 600;

  color: var(--super-admin-tenant-avatar-color);
}

.super-admin-tenant-info {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.super-admin-tenant-name {
  font-family: "Satoshi", sans-serif;
  font-size: 14px;
  font-weight: 500;

  color: #171b2c;

  color: var(--header__color, #171b2c);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.super-admin-tenant-id {
  margin-top: 2px;

  font-family: "Satoshi", sans-serif;
  font-size: 11px;
  font-weight: 400;

  color: #a0a2aa;
}

.super-admin-activity-card .global-table-wrapper {
  width: 100%;
}

.super-admin-activity-card .rdt_TableHeadRow {
  min-height: 52px;

  border-bottom: 1px solid #e3e3e3;

  border-bottom: 1px solid var(--border__color, #e3e3e3);
}

.super-admin-activity-card .rdt_TableRow {
  min-height: 64px;

  border-bottom: 1px solid #e3e3e3;

  border-bottom: 1px solid var(--border__color, #e3e3e3);
}

.super-admin-activity-card .rdt_TableCell {
  font-family: "Satoshi", sans-serif;
}

.super-admin-activity-card .rdt_TableCol {
  font-family: "Satoshi", sans-serif;
}

.super-admin-activity-card .rdt_Pagination {
  border-top: none;
}

.super-admin-platform-overview {
  width: 100%;
  margin-bottom: 28px;
}

.super-admin-platform-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

.super-admin-platform-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.super-admin-platform-title-row h2 {
  margin: 0;

  font-family: "Satoshi", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;

  color: var(--header__color);
}

.super-admin-platform-overview-header p {
  margin: 6px 0 0 0;

  font-family: "Satoshi", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;

  color: #898c96;
}

.super-admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 9px;

  border-radius: 999px;

  background: #eeeeff;
  border: 1px solid #e6e6e8;

  color: #735ce9;

  font-family: "Satoshi", sans-serif;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.tenant-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.tenant-detail-title-block h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.tenant-detail-total-value {
  font-size: 32px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--header__color);
}

.tenant-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}

.tenant-detail-stat-card {
  border: 1px solid var(--border__color);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tenant-detail-stat-label {
  font-size: 12px;
  color: #8b8e98;
}

.tenant-detail-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--header__color);
}
.super-admin-metrics-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  grid-gap: 12px;

  gap: 12px;
}

.super-admin-metrics-grid > * {
  min-width: 0;
}

.super-admin-metrics-grid .metric-card {
  min-height: 100px;
  padding: 16px;
  box-sizing: border-box;
}

.super-admin-metrics-grid .metric-value {
  margin-top: 10px;
}

.super-admin-metrics-grid .metric-value > div {
  font-size: 28px;
}

.super-admin-metrics-grid .metric-value-description {
  display: none;
}

.super-admin-metrics-grid .card-header {
  margin: 0;
}

.super-admin-metrics-grid .title {
  font-size: 14px;
}

.super-admin-metrics-grid .icon-wrapper {
  width: 24px;
  height: 24px;
}

.super-admin-metrics-grid .card-header-icon {
  width: 16px;
  height: 16px;
}

.super-admin-dashboard-filters {
  /* width: 70%; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.super-admin-dashboard-filters .MuiAutocomplete-root {
  width: 220px;
  flex-shrink: 0;
}

.super-admin-custom-date-filter-popup {
  top: 200px;
  left: 400px;
  width: 500px;
}
.tenant-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}
.tenant-detail-grid:first-of-type {
  grid-template-columns: 1fr;
}

.tenant-detail-stat-card {
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tenant-detail-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #8b8e98;
  letter-spacing: 0.5px;
}

.tenant-detail-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--header__color);
}
.tenant-detail-body .tenant-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #8b8e98;
  letter-spacing: 0.5px;
  padding-top: 8px;
}
.tenant-detail-quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}

.tenant-detail-quota-card {
  border: 1px solid var(--border__color);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--body__background);
  transition: all 0.2s ease;
}

.tenant-detail-quota-card:hover {
  border-color: #6860ee;
  box-shadow: 0 2px 8px rgba(104, 96, 238, 0.1);
}

.quota-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quota-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #8b8e98;
  letter-spacing: 0.3px;
}

.quota-card-usage {
  font-size: 14px;
  font-weight: 600;
  color: var(--header__color);
}

.quota-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border__color);
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0;
}

.quota-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.quota-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.quota-label {
  font-size: 11px;
  color: #8b8e98;
  font-weight: 400;
}

.tenant-detail-grid .tenant-detail-stat-card {
  border-color: var(--border__color);
  background: var(--body__background);
}

.tenant-detail-stat-card .tenant-detail-stat-value {
  text-transform: capitalize;
}

@media screen and (max-width: 1200px) {
  .super-admin-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .super-admin-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .super-admin-metrics-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .super-admin-header {
    padding: 18px;
  }

  .super-admin-header-right {
    gap: 14px;
  }

  .super-admin-greeting h1 {
    font-size: 22px;
    line-height: 27px;
  }

  .super-admin-header-left p {
    font-size: 14px;
  }

  .super-admin-brand-text {
    display: none;
  }
}
.super-admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;

  border-radius: 999px;
  border: 1px solid transparent;

  font-family: "Satoshi", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;

  text-transform: capitalize;
  white-space: nowrap;
}

.super-admin-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.super-admin-status-badge.status-active {
  background: #e9f9ef;
  border-color: #c5eed3;
  color: #1f9d55;
}
.super-admin-status-badge.status-active .super-admin-status-dot {
  background: #1f9d55;
}

.super-admin-status-badge.status-trialing {
  background: #eef2ff;
  border-color: #d9e0ff;
  color: #4f5fdb;
}
.super-admin-status-badge.status-trialing .super-admin-status-dot {
  background: #4f5fdb;
}

.super-admin-status-badge.status-paused {
  background: #f2f2f4;
  border-color: #e3e3e6;
  color: #71727a;
}
.super-admin-status-badge.status-paused .super-admin-status-dot {
  background: #a0a2aa;
}

.super-admin-status-badge.status-past-due {
  background: #fff4e5;
  border-color: #ffe3b3;
  color: #b76e00;
}
.super-admin-status-badge.status-past-due .super-admin-status-dot {
  background: #f5a623;
}

.super-admin-status-badge.status-canceled {
  background: #fdecec;
  border-color: #f8cfcf;
  color: #d9403f;
}
.super-admin-status-badge.status-canceled .super-admin-status-dot {
  background: #d9403f;
}

.super-admin-status-badge.status-default {
  background: #f2f2f4;
  border-color: #e3e3e6;
  color: #71727a;
}
.super-admin-status-badge.status-default .super-admin-status-dot {
  background: #a0a2aa;
}

.super-admin-toggle {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  background-color: var(--grid-bg);
  border-radius: 50px;
  padding: 5px;
}
.daily-report-container {
  margin: 20px;
}
.daily-report-table {
  margin-top: 20px;
}
.remarks-textarea-container {
  padding: 20px 0;
}

.remarks-textarea-container .input-field {
  margin-bottom: 0;
}

.remarks-textarea-container .error-message {
  margin-top: 5px;
}

/* Header row */
.daily-report-header-row {
  justify-content: space-between;
}

.daily-report-title {
  margin: 0;
}

/* Filters bar */
.daily-report-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color, #e0e0e0);
  background: var(--body__background);
}

.daily-report-user-select {
  width: 240px;
  min-width: 240px;
}

.daily-report-date-range {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
}

.daily-report-date-range .date-range-control {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  flex: 0 0 240px;
  width: 240px;
  height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color, #e0e0e0);
  background: var(--body__background);
  color: var(--header__color);
  cursor: pointer;
}

.date-range-icon {
  width: 16px;
  height: 16px;
}

.date-range-label {
  opacity: 0.6;
}

.date-range-label--active {
  opacity: 1;
}

.date-range-cancel-icon {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s;
}

.date-range-cancel-icon:hover {
  opacity: 1;
}
.recent-activity-fallbacks {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.report-remarks-readonly {
  padding: 4px 0;
}

.report-remarks-label {
  font-size: 13px;
  font-weight: 600;
  color: #62748a;
  display: block;
  margin-bottom: 8px;
}

.report-remarks-text {
  white-space: pre-line;
  line-height: 1.6;
  color: var(--header__color);
  margin: 0;
}
.side-popup-header-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.side-popup-header-title {
  margin: 0;
  color: var(--header__color);
}

.side-popup-header-subtitle {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #62748a;
}

.side-popup-header-actions {
  display: flex;
  gap: 10px;
}

/* Side popup content */
.side-popup-content {
  padding: 20px 0;
}

.user-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.user-avatar-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background-color: #6860ee;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.user-name-display {
  font-weight: 600;
  font-size: 15px;
  color: var(--header__color);
  line-height: 1.3;
}

.checkin-checkout-bar {
  display: flex;
  align-items: center;
  justify-content: stretch;
  background-color: var(--body__background);
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.checkin-checkout-bar .user-info-row {
  margin-bottom: 0;
}

.checkin-checkout-bar > div {
  flex: 1 1;
  min-height: 64px;
  padding: 12px 22px;
  box-sizing: border-box;
}

.checkin-checkout-bar > div + div {
  border-left: 1px solid #e0e0e0;
  border-left: 1px solid var(--border-color, #e0e0e0);
}

.checkin-checkout-bar .user-info-row {
  flex: 1.35 1;
}

.info-label {
  font-size: 12px;
  color: #62748a;
}

.info-value {
  font-weight: 600;
  font-size: 14px;
  color: var(--header__color);
  margin-top: 2px;
}

.metrics-card-wrapper {
  margin-bottom: 24px;
}

.daily-report-submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 18px;
  gap: 18px;
  align-items: stretch;
}

.daily-report-submit-remarks-panel,
.daily-report-submit-side-panel {
  min-width: 0;
}

.daily-report-submit-remarks-panel {
  display: flex;
  flex-direction: column;
}

.daily-report-submit-remarks-field {
  flex: 1 1;
  min-height: 338px;
  margin-bottom: 0;
}

.daily-report-submit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.daily-report-submit-side-card {
  width: 100%;
  border: 1px solid var(--card__border);
  border-radius: 18px;
  box-sizing: border-box;
}

.daily-report-submit-side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.daily-report-submit-side-panel .metrics-card-wrapper {
  margin-bottom: 0;
}

.daily-report-submit-recent-card {
  background: var(--card__background);
  padding: 22px 15px;
  flex: 1 1;
}

.side-popup-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--border-color, #e0e0e0);
  margin: 20px 0;
}

.remarks-textarea {
  min-height: 150px;
  font-family: inherit;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .daily-report-submit-layout {
    grid-template-columns: 1fr;
  }

  .checkin-checkout-bar {
    flex-wrap: wrap;
  }

  .checkin-checkout-bar > div {
    flex: 1 1 50%;
  }

  .checkin-checkout-bar > div + div {
    border-left: 0;
  }

  .checkin-checkout-bar > div:nth-child(even) {
    border-left: 1px solid #e0e0e0;
    border-left: 1px solid var(--border-color, #e0e0e0);
  }

  .checkin-checkout-bar > div:nth-child(n + 3) {
    border-top: 1px solid #e0e0e0;
    border-top: 1px solid var(--border-color, #e0e0e0);
  }
}

.report-summary-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.report-summary-card {
  flex: 1 1 220px;
  background: #ffffff;
  background: var(--card__background, #ffffff);
  border: 1px solid #eef0f2;
  border: 1px solid var(--border__color, #eef0f2);
  border-radius: 14px;
  padding: 18px 20px;
}

.report-summary-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa0a6;
  color: var(--muted__color, #9aa0a6);
  margin-bottom: 10px;
}

.report-summary-card__value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 600;
  color: #1a1a1a;
  color: var(--header__color, #1a1a1a);
  line-height: 1.2;
}

.report-summary-card__check {
  color: #22c55e;
  flex-shrink: 0;
}

.report-summary-card__subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: #9aa0a6;
  color: var(--muted__color, #9aa0a6);
}
.metrics-card {
  background: #ffffff;
  background: var(--body__background, #ffffff);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 18px 20px 4px;
}

.metrics-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card__border);
}

.metrics-card-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #efeafe;
  color: #6860ee;
  flex-shrink: 0;
}

.metrics-card-header-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #1e293b;
  color: var(--header__color, #1e293b);
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.metric-item {
  padding: 14px 16px;
}

.metric-item:nth-child(odd) {
  padding-left: 0;
}

.metric-item:nth-child(even) {
  padding-right: 0;
}

.metric-item:nth-last-child(-n + 2) {
  border-bottom: none;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 8px;
}

.metric-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #1e293b;
  color: var(--header__color, #1e293b);
}

.metric-icon {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .metric-item {
    padding: 12px 10px !important;
  }
}
.admin-report-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-report-summary-card {
  background: var(--card__background);
  border: 1px solid var(--card__border);
  border-radius: 16px;
  padding: 20px 22px;
}

.admin-report-summary-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-report-summary-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a94a6;
}

.admin-report-summary-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-report-summary-card__value {
  font-size: 30px;
  font-weight: 700;
  color: var(--header__color);
  line-height: 1.2;
}

.admin-report-summary-card__subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #8a94a6;
}

@media (max-width: 900px) {
  .admin-report-summary-cards {
    grid-template-columns: 1fr;
  }
}
.invoice-page-outer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--body__background);
  gap: 4px;
}

.invoice-search-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 14px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.invoice-search-input {
  flex: 1 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--header__color);
  font-family: inherit;
  font-size: 14px;
}

.invoice-search-input::placeholder {
  color: #8b97ad;
}

.invoice-search-button {
  height: 44px;
  min-width: 78px;
  border-radius: 0 !important;
  padding: 0 16px !important;
}

.invoice-status-filter {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

.invoice-status-filter__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #60708d;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.invoice-status-filter__option:hover {
  color: #6860ee;
}

.invoice-status-filter__option--active {
  background: #6860ee;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(104, 96, 238, 0.24);
}

.invoice-status-filter__option--active:hover {
  color: #ffffff;
}

.invoice-status-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef1f7;
  color: #60708d;
  font-size: 12px;
  font-weight: 600;
}

.invoice-status-filter__option--active .invoice-status-filter__count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.invoice-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--body__background);
  background: var(--table__background, var(--body__background));
}

.invoice-table-heading h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--header__color);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.invoice-table-heading h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(113, 128, 154, 0.16);
  background: var(--filter-button, rgba(113, 128, 154, 0.16));
  color: #71809a;
  color: var(--admin-dashboard-muted, #71809a);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.invoice-candidate-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.invoice-primary-text {
  color: var(--header__color);
  font-weight: 500;
}

.invoice-secondary-text {
  color: var(--sub__color);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 190px;
}

.invoice-generate-button {
  min-width: 58px;
  height: 28px;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  gap: 0 !important;
}

.invoice-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 360px;
  padding: 32px 18px;
  background: var(--body__background);
  color: var(--sub__color);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.invoice-create-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  color: var(--header__color);
  font-family: Satoshi, inherit, sans-serif;
}

.invoice-create-container h3,
.invoice-create-container h4,
.invoice-create-container label,
.invoice-create-container input,
.invoice-create-container button,
.invoice-create-container select,
.invoice-create-container p,
.invoice-create-container span,
.invoice-create-container strong {
  font-family: inherit;
}

.invoice-create-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 10px;
  background: #ffffff;
  background: var(--table__background, #ffffff);
}

.invoice-create-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.invoice-create-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d1d5db;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.invoice-create-person h3 {
  margin: 0;
  color: var(--header__color);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.invoice-create-person p {
  margin: 3px 0 0;
  color: var(--sub__color);
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.invoice-create-badges {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-create-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.invoice-create-badge--joined {
  border: 1px solid #52d483;
  background: #dbfbe8;
  color: #079344;
}

.invoice-create-badge--draft {
  background: #f1f3f7;
  color: #5f6778;
}

.invoice-create-badge--draft::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: #7b8494;
}

.invoice-create-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.invoice-create-info-grid .MuiPaper-root {
  min-width: 0;
  border-color: #dfe5f2 !important;
  border-color: var(--border__color, #dfe5f2) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background: var(--body__background, #ffffff) !important;
}

.invoice-create-info-grid .metric-card {
  min-height: 54px;
  padding: 10px 12px;
}

.invoice-create-info-grid .header-icon-container {
  justify-content: flex-start;
  gap: 6px;
}

.invoice-create-info-grid .title {
  color: var(--sidepopup-label-color) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.invoice-create-info-grid .invoice-summary-icon {
  order: -1;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.invoice-create-info-grid .card-header-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.invoice-create-info-grid .metric-value {
  display: none;
}

.invoice-create-info-grid .metric-value-description {
  min-width: 0;
  margin-top: 8px;
}

.invoice-create-info-grid .trend-text {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--header__color) !important;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-placement-card {
  width: auto;
  padding: 26px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 10px;
  background: #ffffff;
  background: var(--table__background, #ffffff);
}

.invoice-placement-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eee9ff;
  color: #6860ee;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-placement-card h3 {
  margin: 0 0 6px;
  color: var(--header__color);
  font-size: 16px;
  font-weight: 600;
}

.invoice-placement-card p {
  margin: 0 0 22px;
  color: var(--sub__color);
  font-size: 12px;
  font-weight: 500;
}

.invoice-placement-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 10px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
}

.invoice-placement-field {
  min-width: 0;
}

.invoice-placement-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--sidepopup-label-color);
  font-size: 14px;
  font-weight: 600;
}

.invoice-placement-field div {
  min-height: 32px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f8fafc;
  background: var(--filter-button, #f8fafc);
  color: var(--header__color);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-form-section {
  margin-top: 18px;
}

.invoice-form-section h3 {
  margin: 0 0 6px;
  color: var(--header__color);
  font-size: 16px;
  font-weight: 600;
}

.invoice-form-section p {
  margin: 0 0 18px;
  color: var(--sub__color);
  font-size: 12px;
  font-weight: 500;
}

.invoice-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 10px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
}

.invoice-form-field {
  min-width: 0;
}

.invoice-form-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--sidepopup-label-color);
  font-size: 14px;
  font-weight: 600;
}

.invoice-form-field input,
.invoice-form-field select,
.invoice-date-picker-trigger {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 8px;
  outline: none;
  background: #f8fafc;
  background: var(--filter-button, #f8fafc);
  color: var(--header__color);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.invoice-form-field input:focus,
.invoice-form-field select:focus,
.invoice-date-picker-trigger:focus {
  border-color: #6860ee;
  box-shadow: 0 0 0 2px rgba(104, 96, 238, 0.12);
}

.invoice-date-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  text-align: left;
}

.invoice-form-field .MuiInputBase-root {
  min-height: 34px;
  border-radius: 8px !important;
  background: #f8fafc;
  background: var(--filter-button, #f8fafc);
}

.invoice-form-field .MuiOutlinedInput-notchedOutline {
  border-color: #dfe5f2 !important;
  border-color: var(--border__color, #dfe5f2) !important;
  border-radius: 8px !important;
}

.invoice-form-field .MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input {
  min-height: 18px;
  padding: 8px 10px !important;
  color: var(--header__color);
  font-size: 14px;
  font-weight: 500;
}

.invoice-billing-section {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 10px;
  background: #ffffff;
  background: var(--table__background, #ffffff);
}

.invoice-billing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.invoice-billing-header h3 {
  margin: 0 0 4px;
  color: var(--header__color);
  font-size: 16px;
  font-weight: 600;
}

.invoice-billing-header p {
  margin: 0;
  color: var(--sub__color);
  font-size: 12px;
  font-weight: 500;
}

.invoice-billing-header p strong {
  color: #6860ee;
  color: var(--button-bg-color, #6860ee);
  font-weight: 600;
}

.invoice-billing-mode {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 16px;
  background: #f8fafc;
  background: var(--filter-button, #f8fafc);
}

.invoice-billing-mode__option {
  min-height: 30px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: transparent !important;
  color: var(--sidepopup-label-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

.invoice-billing-mode__option--active {
  background: #ffffff !important;
  background: var(--body__background, #ffffff) !important;
  color: var(--header__color);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.invoice-billing-calculation-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 18px !important;
  white-space: nowrap;
}

.invoice-billing-calculation-popup .invoice-calculation-card {
  margin-top: 16px;
}

.invoice-billing-section + .invoice-calculation-card {
  margin-top: 16px;
}

.invoice-billing-calculation-popup .invoice-calculation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoice-billing-section--popup {
  margin-top: 0;
  background: var(--sidepopup-background);
}

.invoice-billing-section--popup .invoice-billing-header {
  margin-bottom: 14px;
}

.invoice-popup-tax-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px;
}

.invoice-popup-tax-fields span {
  font-size: 12px;
}

.invoice-popup-calculate-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.invoice-billing-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px 18px;
  gap: 14px 18px;
}

.invoice-billing-fields>.invoice-billing-field:nth-child(1),
.invoice-billing-fields>.invoice-billing-field:nth-child(2) {
  display: none;
}

.invoice-billing-field {
  min-width: 0;
}

.invoice-billing-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--sidepopup-label-color);
  font-size: 14px;
  font-weight: 600;
}

.invoice-billing-field label span {
  color: #ef4444;
}

.invoice-billing-field strong {
  display: flex;
  align-items: center;
  min-height: 34px;
  color: var(--header__color);
  font-size: 14px;
  font-weight: 600;
}

.invoice-money-input {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 8px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
}

.invoice-money-input span {
  flex: 0 0 auto;
  margin-right: 6px;
  color: var(--header__color);
  font-size: 14px;
  font-weight: 600;
}

.invoice-money-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--header__color);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.invoice-money-textfield {
  position: relative;
}

.invoice-money-prefix {
  position: absolute;
  left: 10px;
  bottom: 11px;
  z-index: 1;
  color: var(--header__color);
  font-size: 14px;
  font-weight: 600;
}

.invoice-billing-field--dynamic .textfield-container {
  margin: 0;
}

.invoice-billing-field--dynamic .textfield-input {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #dfe5f2;
  border: 1px solid var(--border__color, #dfe5f2);
  border-radius: 8px;
  background: #ffffff;
  background: var(--body__background, #ffffff);
  color: var(--header__color);
  font-size: 14px;
  font-weight: 500;
}

.invoice-search-container-wrap {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background-color: var(--body__background);
  padding: 10px 20px 2px;
  width: -webkit-fill-available;
}

.invoice-status-filter {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background-color: var(--body__background);
  padding: 4px 0;
  margin-left: 20px;
  margin-bottom: 2px;
  /* width: -webkit-fill-available; */
}

.invoice-table-reslt {
  flex: 1 1 auto;
  min-height: 0;
  background-color: var(--body__background);
  padding: 4px 20px 12px;
  width: -webkit-fill-available;
  overflow: hidden;
}

.invoice-table-reslt .jobs-table-results {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.invoice-table-reslt .global-table-wrapper {
  width: 100%;
  overflow: visible;
  border-radius: 0;
}

.invoice-pipeline-table {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
}

.invoice-pipeline-table .rdt_Table {
  border: 1px solid var(--border__color);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--table__background);
}

.invoice-pipeline-table .rdt_TableHeadRow {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.invoice-pipeline-table .rdt_TableHeadRow {
  min-height: 43px;
  border-bottom-color: var(--border__color);
}

.invoice-pipeline-table .rdt_TableRow {
  min-height: 48px;
  border-bottom-color: var(--border__color);
}

.invoice-pipeline-table .rdt_TableBody .rdt_TableRow,
.invoice-pipeline-table .rdt_TableBody .rdt_TableCell {
  background-color: var(--table__background) !important;
}

.invoice-pipeline-table .rdt_TableCell,
.invoice-pipeline-table .rdt_TableBody .rdt_TableCell {
  color: var(--header__color) !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  padding-top: 4px;
  padding-bottom: 4px;
}

.invoice-pipeline-table .rdt_Pagination {
  justify-content: flex-end !important;
  min-height: 34px;
  padding: 6px 10px 0 0 !important;
  background: transparent !important;
  color: var(--header__color) !important;
  border-top: 0 !important;
}

@media (max-width: 768px) {
  .invoice-search-container-wrap {
    background-color: var(--body__background);
    padding-top: 25px;
  }

  .invoice-create-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-placement-card {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .invoice-search-container {
    border-radius: 12px;
  }

  .invoice-search-button {
    min-width: 68px;
    padding: 0 12px !important;
  }

  .invoice-status-filter {
    width: 100%;
  }

  .invoice-table-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .invoice-create-badges {
    position: static;
    align-self: flex-start;
  }

  .invoice-create-info-grid,
  .invoice-placement-fields,
  .invoice-form-fields,
  .invoice-billing-fields,
  .invoice-billing-calculation-popup .invoice-calculation-grid {
    grid-template-columns: 1fr;
  }

  .invoice-billing-header {
    flex-direction: column;
  }
}


.invoice-profitability-referral-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border__color);
  border-radius: 16px;
  background: var(--sidepopup-background);
  overflow: hidden;
  margin-top: 24px;
}

.invoice-profitability-referral-card--popup {
  margin-top: 0;
}

.invoice-margin-calculation-popup .invoice-calculation-card {
  margin-top: 16px;
}

.invoice-profitability-card {
  padding: 26px 24px 24px;
}

.invoice-profitability-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 9px;
}

.invoice-profitability-heading h3 {
  margin: 0;
  color: #171a24;
  color: var(--header__color, #171a24);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}

.invoice-profitability-heading p {
  margin: 5px 0 0;
  color: #7c8190;
  font-size: 13px;
  line-height: 1.45;
}

.invoice-profitability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 16px;
  column-gap: 16px;
  grid-row-gap: 18px;
  row-gap: 18px;
  margin-top: 27px;
}

.invoice-calculate-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.invoice-calculate-action--referral {
  margin-top: -12px;
  padding: 0 24px 24px;
}

.invoice-calculate-button {
  min-width: 118px;
  min-height: 34px;
  padding: 7px 18px !important;
  border-radius: 8px !important;
  flex: 0 0 auto;
}

.invoice-profitability-field--action,
.invoice-referral-field--action {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.invoice-profitability-referral-card > .invoice-calculation-card {
  width: auto;
  margin: 16px 10px 24px;
}

.invoice-profitability-field {
  min-width: 0;
}

.invoice-profitability-field>label,
.invoice-referral-field>label {
  display: block;
  margin: 0 0 6px;
  color: #687080;
  color: var(--sidepopup-label-color,
      #687080);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.invoice-profitability-field input {
  width: 100%;
  height: 41px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #dedfe5;
  border-radius: 12px;
  outline: none;
  background: #ffffff;
  background: var(--sidepopup-input-background,
      #ffffff);
  color: #252936;
  color: var(--header__color, #252936);
  font-size: 14px;
  font-weight: 400;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.invoice-profitability-field input:focus {
  border-color: #6860ee;
  box-shadow:
    0 0 0 3px rgba(104, 96, 238, 0.08);
}

.invoice-referral-card {
  border: 1px solid var(--border__color);
  margin: 10px;
  border-radius: 16px;
}

.invoice-referral-header {
  padding: 25px 24px 22px;
}

.invoice-referral-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
}

.invoice-referral-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #6860ee;
  cursor: pointer;
}

.invoice-referral-title {
  color: #20232d;
  color: var(--header__color,
      #20232d);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.invoice-referral-header>p {
  margin: 6px 0 0 0;
  color: #858997;
  font-size: 13px;
  line-height: 1.45;
}

.invoice-referral-divider {
  height: 1px;
  background: #e8e8ed;
}

.invoice-referral-grid {
  display: grid;
  grid-template-columns: repeat(2,
      minmax(0, 1fr));
  grid-column-gap: 16px;
  column-gap: 16px;
  grid-row-gap: 18px;
  row-gap: 18px;
  padding: 26px 24px 24px;
}

.invoice-referral-grid--disabled {
  opacity: 0.55;
}

.invoice-referral-grid--disabled input,
.invoice-referral-grid--disabled .MuiInputBase-root {
  cursor: not-allowed;
}

.invoice-referral-field {
  min-width: 0;
}

.invoice-referrer-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 41px;
  box-sizing: border-box;
  border: 1px solid #dedfe5;
  border-radius: 12px;
  background: #ffffff;
  background: var(--sidepopup-input-background,
      #ffffff);
  overflow: hidden;
}

.invoice-referrer-input>span {
  flex: 0 0 auto;
  padding-left: 13px;
  color: #737887;
  font-size: 14px;
}

.invoice-referrer-input input {
  width: 100%;
  height: 100%;
  padding: 0 12px 0 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: #252936;
  color: var(--header__color, #252936);
  font-size: 14px;
}

.invoice-referrer-input:focus-within {
  border-color: #6860ee;
  box-shadow:
    0 0 0 3px rgba(104, 96, 238, 0.08);
}

.invoice-reward-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 41px;
  box-sizing: border-box;
  border: 1px solid #dedfe5;
  border-radius: 12px;
  background: #ffffff;
  background: var(--sidepopup-input-background,
      #ffffff);
  overflow: hidden;
}

.invoice-reward-input input {
  width: 100%;
  height: 100%;
  padding: 0 8px 0 12px;
  border: 0;
  outline: none;
  background: transparent;
  color: #252936;
  color: var(--header__color, #252936);
  font-size: 14px;
}

.invoice-reward-input>span {
  flex: 0 0 auto;
  padding-right: 13px;
  color: #737887;
  font-size: 14px;
}

.invoice-reward-input:focus-within {
  border-color: #6860ee;
  box-shadow:
    0 0 0 3px rgba(104, 96, 238, 0.08);
}

@media (max-width: 700px) {
  .invoice-profitability-grid,
  .invoice-referral-grid {
    grid-template-columns: 1fr;
  }
  .invoice-profitability-card,
  .invoice-referral-header,
  .invoice-referral-grid,
  .invoice-calculate-action--referral {
    padding-left: 16px;
    padding-right: 16px;
  }

  .invoice-referral-header>p {
    margin-left: 0;
  }

  .invoice-profitability-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-calculate-button {
    width: 100%;
  }
}

.invoice-from-container {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  margin-bottom: 18px;
  background: var(--body__background);
}

.invoice-from-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.invoice-from-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  color: var(--header__color, #1f2937);
}

.invoice-from-header p {
  margin: 0;
  font-size: 13px;
  color: #8b8f9a;
}

.invoice-financial-profile {
  margin-bottom: 20px;
}

.invoice-financial-profile>label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  color: var(--header__color, #374151);
}

.invoice-financial-profile-arrow {
  font-size: 18px !important;
  color: #8b8f9a !important;
}

.invoice-from-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.invoice-from-card {
  border: 1px solid var(--border__color);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-sizing: border-box;
  background: var(--body__background);
}

.invoice-company-card {
  grid-row: span 2;
}

.invoice-from-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #7c818c;
}

.invoice-from-card-title span {
  font-size: 16px;
  color: #8b8f9a;
}

.invoice-from-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invoice-from-details>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.invoice-from-details span {
  font-size: 12px;
  color: var(--admin-dashboard-muted);
}

.invoice-from-details strong {
  max-width: 65%;
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  color: var(--header__color);
}

.invoice-same-address {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--header__color);
}

.invoice-same-address input {
  width: 18px;
  height: 18px;
  accent-color: #6860ee;
  margin: 0;
}

@media (max-width: 768px) {
  .invoice-from-header {
    flex-direction: column;
  }

  .invoice-from-grid {
    grid-template-columns: 1fr;
  }

  .invoice-company-card {
    grid-row: auto;
  }
}

.invoice-placement-card input[type="number"]::-webkit-inner-spin-button,
.invoice-placement-card input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.invoice-placement-card input[type="number"] {
  -moz-appearance: textfield;
}
.invoice-calculation-card {
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--border__color);
    border-radius: 16px;
    background: var(--body__background);
    box-sizing: border-box;
}

.invoice-calculation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 14px;
    gap: 14px;
}

.invoice-calculation-item {
    min-height: 98px;
    padding: 18px;
    border: 1px solid var(--border__color);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.invoice-calculation-label {
    color: #6F717B;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.invoice-calculation-value {
    color: var(--header__color);
    font-size: 24px;
    font-weight: 700;
}

.invoice-calculation-item--total {
    background: var(--invoice-billing-total-amount-bg);
    border-color: #785AE440;
}

.invoice-calculation-item--total .invoice-calculation-value {
    color: #6860ee;
}

.invoice-calculation-item--total .invoice-calculation-label {
    color: #6F717B;
}

.invoice-margin-bar-card {
    margin-top: 26px;
    padding: 20px;
    border: 1px solid var(--border__color);
    border-radius: 18px;
}

.invoice-margin-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.invoice-margin-percentage-label {
    color: var(--header__color);
    font-size: 16px;
    font-weight: 700;
}

.invoice-margin-status {
    padding: 5px 12px;
    border: 1px solid #9de3c0;
    border-radius: 20px;
    background: #e9fff4;
    color: #00a65a;
    font-size: 13px;
    font-weight: 600;
}

.invoice-margin-progress {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 10px;
    background: #f0f1f4;
}

.invoice-margin-progress-fill {
    height: 100%;
    border-radius: 10px;
    background: #00a65a;
    transition: width 0.3s ease;
}

/*# sourceMappingURL=main.8bdd5330.css.map*/