:root {
  --background-col: #F5F7FF;
  --black-col: #040919;
  --lite-gray: #E5E8F2;
  --search-box: #DEE3F1;
  --white-col: #FFFFFF;
  --lite-font-col: #555B6C;
  --lite-primary: #2B449D;
  --primary-col: #2B449D;
  --button-border: #A5ABC3;
  --button-text: #040919;
  --filter-bar-bg: #FFFFFF;
  --filter-bar-border: #E5E8F2;
  --line-col: #F2F3FA;
  --user-delete-text: #2B449D;
  --user-delete-button: #040919;
  --user-filter-gray: #E5E8F2;
  --table-container: #FFFFFF;
  --table-head: #E5E8F2;
  --table-border: #E5E8F2;
  --table-tr-border: #CDD1E4;
  --table-data-col: #040919;
  --table-hover-box: #d8dcec1c;
  --table-hover-btns: #fdfdfd;
  --pagination-info: #555B6C;
  --active-col: #2B449D;
  --active-col-text: #FFFFFF;
  --dropdown-border: #F8F9FB;
  --dropdown-hover: #f1f1f1;
  --color-lite-blue: #F2F3FA;
  --color-hover: #E8EDFF;
  --setting-card-hover: $color-background;
  --status-qualified-color: #7eb7e99e;
  --status-qualified-border: #053762;
  --status-contacted-color: #E8EDFF;
  --status-contacted-border: #4B64BF;
  --status-new-color: #DEF1EA;
  --status-new-border: #0D7C56;
  --status-proposal-background: #F8E3B7;
  --status-proposal-border: #D6A744;
  --status-negotiation-background: #E3E0E0;
  --status-negotiation-border: #92898A;
  --status-win-color: #DBFFD8;
  --status-win-border: #498144;
  --status-loss-color: #EDD0CF;
  --status-loss-border: #B05755;
  --status-pending-color: #F8F1DE;
  --status-pending-border: #D19F1F;
  --status-overdue-color: #F6E1E5;
  --status-overdue-border: #D72F4D;
  --status-done-color: #E8EDFF;
  --status-done-border: #4B64BF;
  --status-default-color: #A5ABC3;
  --status-default-border: #292929;
  --status-active-color: #DEF1EA;
  --status-acive-border: #0D7C56;
  --status-inactive-color: #F6E1E5;
  --status-inactive-border: #D72F4D;
  --dashboard-graph-color: #fff;
  --card-color: #ffffff;
  --card-text: #040919;
  --card-button-border: #4B64BF;
  --card-button-bg: #E8EDFF;
  --border-color: #A5ABC3;
  --progress-box: #F5F7FF;
  --details-table-border: #f2f3fa;
  --chart-label: #040919;
  --dashboard-border: #e5e8f2;
  --dashboard-table-font: #040919;
  --gray-icon-color: #E5E8F2;
  --dashboard-sml-title: #040919;
  --welcome-font: #555B6C;
  --tab-font: #040919;
  --tab-active-bg: #040919;
  --tab-border: #E5E8F2;
  --tab-hover: #f1f1f1;
  --table-h-scrollbar: #CDD1E4;
  --tabs-lg-active: #0A0C0E;
  --head-primary-color: #2B449D;
  --center-area-transparent: #ffffff;
  --card-two-color: #f5f7ff;
  --skelton-loader-one: #E5E8F2;
  --skelton-loader-two: #CCD0DE;
  --settings-field-type-border: #A5ABC3;
  --settings-field-type-bg: #F2F3FA;
  --switch-button-bg: #e5e8f2;
  --summary-bg: #F8F9FC;
  --summary-border: #E5E8F2;
  --summary-label: #040919;
  --empty-data: #040919;
  --modal-bg: #FFFFFF;
  --notification-color: #F1F2F8;
  --notification-read: #FFFFFF;
  --notification-text: #040919;
  --modal-tabs-bg: #040919;
  --notification-rounded: #E5E8F2;
  --notification-rounded-hover: #FFFFFF;
  --modal-border: #F2F3FA;
  --modal-head: #FFFFFF;
  --table-border-lte: #CDD1E4;
  --authorization-border: #004f33;
  --authorization-bg: #005b3b70;
  --pending1-border: #d7c10d;
  --pending1-bg: #f1ba183b;
  --revise-border: #e57220;
  --revise-bg: #e572204f;
  --revised-border: #0424b3;
  --revised-bg: #002d975c;
  --expired-border: #b90000;
  --expired-bg: #dd10105c;
  /*  --extra-alert: #504bbf;*/
  --extra-alert: #D72F59;
  --error-msg: #D72F59;
  --flatpickr-week: #0000008a;
  --flatpickr-lastmonth-day: #3939394d;
  --flatpickr-hover: #e6e6e6;
  --select-hover: #E8EDFF;
  --kebab-bg: #FFFFFF;
  --kebab-btn-hover: #E5E8F2;
  --kebab-link-hover: #E8EDFF;
  --flatpickr-year-change: #000000e6;
  --flatpickr-year-change-border: #39393926;
  --no-data-desc: #1A1A1A;
  --user-info-active: #EFF2FF;
  --user-info-border: #E5E8F2;
  --draggable-list-bg: #F2F3FA;
  --border-approval: #0303b6;
  --approval-bg: #0303b630;
  --border-sent: #009790;
  --sent-bg: #0097907a;
  --avatar-toggle: #E5E8F2;
  --select-box-bg: #FFFFFF;
  --user-filter-active: #2B449D;
  --user-filter-border: #FFFFFF;
  --user-filter-viewall-bg: #E5E8F2;
  --user-filter-viewall-border: #FFFFFF;
  --tags-box-bg: #F2F3FA;
  --nav-bg: #fff;
  --nav-active-bg: #F4F7F7;
  --apex-tootip-top: #eceff1;
  --apex-tootip-bg: #e3e3e3;
  --apex--tootip-border: #e3e3e3;
  --status-rejected-color: #56000073;
  --status-rejected-border: #ff0000ab;
  --status-upcoming-bg: #22f52281;
  --status-upcoming-border: green;
  --apex-data-color: #1b1919;
  --tabs-lg-border: #0A0C0E;
  --tab-color: #040919;
  --custom-input-border: #A5ABC3;
  --accordion-bg: #F1F2F8;
  --accordion-heading: #F1F2F8;
  --accordion-border: #CDD1E4;
  --top-table-scroll-thumb: #949494;
  --top-table-scroll-bar: #D9D9D9;
  --notification-rounded-hover: #dfdfdf;
  --empty-title: #5f626a;
  --blur-loader: #ffffff66;
  --settings-card-border: #e5e7eb;
  --add-new-btn-color: #3B5ECE;
  --custom-selected-bg: #CCD7FF;
  --duplication-info-head: #004085;
  --duplication-info-bg: #CCE5FF;
  --duplication-info-desc: #2F4A66;
  --g-search-text: #555B6C;
  --g-search-icon: #555B6C;
  --g-search-border: #E1E2E3;
  --tooltip-bg: #3c5387;
  --tooltip-color: #FFFFFF;
  --modal-label: #555B6C;
  --color-link-hover: #253f8f;
  --color-blue-white: #2B449D;
  --migration-border: #8E9BCA;
  --migration-background: #E2E8FF;
  --migration-head: #0B0B0B;
  --migration-placeholder: #949FB1;
  --color-text: #555B6C;
  --migration-paragraph: #424141;
  /*--migration-paragraph: #8E8E8E;*/
  --color-span: #127343;
  --color-progress: #6D6D6D;
  --color-secondary: #A0CC16;
  --migration-progress: #2b449d;
  --kanban-card-bg: #fff;
  --kanban-card-service: #F2F3FA;
  --kanban-column-count: #A5ABC3;
  --cancelled-color: #ff6969;
  --cancelled-border-color: #de193f;
  --failed-color: #ff214b;
  --failed-border-color: #da0b31;
  --postponed-color: #e9e9e9;
  --postponed-border-color: #c1c1c1;
}

html[data-theme=dark] {
  --background-col: #0A0C0E;
  --black-col: #FFFFFF;
  --lite-gray: #38485A;
  --search-box: #16191D;
  --white-col: #040919;
  --lite-font-col: #caccd4;
  --lite-primary: #6d9eff;
  --button-border: #424548;
  --button-text: #AFB3B7;
  --filter-bar-bg: #191D22;
  --filter-bar-border: #1e2227;
  --line-col: #040919;
  --user-delete-text: #FFFFFF;
  --user-delete-button: #AFB3B7;
  --user-filter-gray: #040919;
  --table-container: #0A0C0E;
  --table-head: #191D22;
  --table-border: #1c1c1c;
  --table-tr-border: #4D5864;
  --table-data-col: #AFB3B7;
  --table-hover-box: #d8dcec1c;
  --table-hover-btns: #0a0c0e;
  --pagination-info: #AFB3B7;
  --active-col: #FFFFFF;
  --active-col-text: #2B449D;
  --dropdown-border: #4D5864;
  --dropdown-hover: #00000085;
  --color-lite-blue: #4D5864;
  --color-hover: #181818ba;
  --setting-card-hover: #00000036;
  --status-qualified-color: #1c52819c;
  --status-qualified-border: #4268899e;
  --status-contacted-color: #213069;
  --status-contacted-border: #0034f1;
  --status-new-color: #143f2f;
  --status-new-border: #004f34;
  --status-proposal-background: #715e36;
  --status-proposal-border: #d79303;
  --status-negotiation-background: #3b3b3b;
  --status-negotiation-border: #6b6b6b;
  --status-win-color: #2d6b28;
  --status-win-border: #42ed32;
  --status-loss-color: #875957;
  --status-loss-border: #c12e2b;
  --status-pending-color: #837551;
  --status-pending-border: #f5b102;
  --status-overdue-color: #cf6277;
  --status-overdue-border: #fd002d;
  --status-done-color: #0e278b;
  --status-done-border: #00145d;
  --status-default-color: #373737;
  --status-default-border: #7d7d7d;
  --status-active-color: #1e4536;
  --status-acive-border: #003724;
  --status-inactive-color: #c4314c;
  --status-inactive-border: #5a0c1c;
  --dashboard-graph-color: #14181E;
  --card-color: #191D22;
  --card-text: #AFB3B7;
  --card-button-border: #4D89FF;
  --card-button-bg: #122255;
  --border-color: #2E3134;
  --progress-box: #0A0C0E;
  --details-table-border: #4D5864;
  --chart-label: #E7EBEE;
  --dashboard-border: #191d22;
  --dashboard-table-font: #AFB3B7;
  --gray-icon-color: #040919;
  --dashboard-sml-title: #E7EBEE;
  --welcome-font: #AFB3B7;
  --tab-font: #a1a1a1;
  --tab-active-bg: #a1a1a1;
  --tab-border: #292929;
  --tab-hover: #2a2a2a;
  --table-h-scrollbar: #444444;
  --tabs-lg-active: #0A0C0E;
  --head-primary-color: #4D89FF;
  --center-area-transparent: transparent;
  --card-two-color: #191D22;
  --skelton-loader-one: #c0bdbd;
  --skelton-loader-two: #c6c6c9;
  --settings-field-type-border: #4D5864;
  --settings-field-type-bg: #14181E;
  --switch-button-bg: #b0b6cd;
  --summary-bg: #263849;
  --summary-border: #424548;
  --summary-label: #AFB3B7;
  --empty-data: #AFB3B7;
  --modal-bg: #0A0C0E;
  --notification-color: #14181E;
  --notification-read: transparent;
  --notification-text: #AFB3B7;
  --modal-tabs-bg: #B1B1B8;
  --notification-rounded: #040919;
  --notification-rounded-hover: #000;
  --modal-border: #14181E;
  --modal-head: #14181E;
  --table-border-lte: #444444;
  --authorization-border: #004f33;
  --authorization-bg: #005b3b70;
  --pending1-border: #af7e01;
  --pending1-bg: #af7e0187;
  --revise-border: #e57220;
  --revise-bg: #e572204f;
  --revised-border: #0424b3;
  --revised-bg: #002d975c;
  --expired-border: #b90000;
  --expired-bg: #dd10105c;
  --extra-alert: #D72F59;
  --flatpickr-week: #bbbbbb8a;
  --flatpickr-lastmonth-day: #b1b1b14d;
  --flatpickr-hover: #484747;
  --select-hover: #0000005c;
  --kebab-bg: #14181E;
  --kebab-btn-hover: #191d22;
  --kebab-link-hover: #000000;
  --flatpickr-year-change: #dfdfdfe6;
  --flatpickr-year-change-border: #d3d2d226;
  --no-data-desc: #c5c5c5;
  --user-info-active: #191d22;
  --user-info-border: #191d22;
  --draggable-list-bg: #191D22;
  --border-approval: #0303b6;
  --approval-bg: #0a0aac93;
  --border-sent: #009790;
  --sent-bg: #0097907a;
  --avatar-toggle: #7b7b7b;
  --select-box-bg: #14181E;
  --user-filter-active: #fff;
  --user-filter-border: #efefef3b;
  --user-filter-viewall-bg: #191d22;
  --user-filter-viewall-border: #717171;
  --tags-box-bg: #333333;
  --nav-bg: #141414;
  --nav-active-bg: #153f3f;
  --apex-tootip-top: #101314;
  --apex-tootip-bg: #343434f5;
  --apex--tootip-border: #3a3a3a;
  --status-rejected-color: #ff000073;
  --status-rejected-border: #ff0000ab;
  --status-upcoming-bg: #22f52233;
  --status-upcoming-border: green;
  --apex-data-color: #eeeeee;
  --tabs-lg-border: #ffffff;
  --tab-color: #b1b1b1;
  --custom-input-border: #3c3d3e;
  --accordion-bg: #202020;
  --accordion-heading: #000;
  --accordion-border: #3d3d3d;
  --top-table-scroll-thumb: #232424;
  --top-table-scroll-bar: #3c3c3d;
  --notification-rounded-hover: #141313;
  --empty-title: #c7c7c7;
  --blur-loader: #40404066;
  --settings-card-border: #222224;
  --custom-selected-bg: #2e2e2e;
  --duplication-info-head: #fff;
  --duplication-info-bg: #497eb5;
  --duplication-info-desc: #cae0f7;
  --g-search-border: #252525;
  --tooltip-bg: #3c5387;
  --tooltip-color: #FFFFFF;
  --g-search-text: #9a9da5;
  --g-search-icon: #9a9da5;
  --modal-label: #979797;
  --color-blue-white: #fff;
  --migration-border: #222224;
  --migration-background: #0a0c0e;
  --kanban-card-bg: #0b1025;
  --kanban-card-service: #131733;
  --kanban-column-count: #060a18;
  --cancelled-color: #ff6969;
  --cancelled-border-color: #de193f;
  --postponed-color: #717171;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 90em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 55%;
  }
}
@media only screen and (max-width: 62.3125em) {
  html {
    font-size: 54%;
  }
}
@media only screen and (max-width: 64em) {
  html {
    font-size: 53%;
  }
}
@media only screen and (max-width: 37.5em) {
  html {
    font-size: 53%;
  }
}

body {
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  color: var(--black-col);
  text-rendering: optimizeLegibility;
  overflow-y: scroll;
  background: var(--background-col);
}

a {
  text-decoration: none;
}

button {
  font-family: "DM Sans", sans-serif;
}

input {
  font-family: "DM Sans", sans-serif;
}

input[type=password]::-moz-password-reveal {
  display: none !important;
}

/* Add some base styling to avoid the flash */
[data-theme=dark] {
  background-color: var(--background-col); /* dark background */
  color: var(--black-col); /* dark text color */
}

input[type=password]::-ms-reveal,
input[type=password]::-webkit-reveal,
input[type=password]::-moz-reveal {
  display: none;
}

input[type=password]::-ms-clear,
input[type=password]::-webkit-clear-button,
input[type=password]::-moz-clear {
  display: none;
}

/* Firefox */
input[type=password]::-moz-password-reveal {
  display: none !important;
}

/* Edge & IE */
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
  display: none !important;
}

/* Chrome / Safari (optional clean-up, not needed for eye icon but for other autofill UI) */
input[type=password]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.header-1 {
  color: var(--black-col);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.64px;
}
@media only screen and (max-width: 90em) {
  .header-1 {
    font-size: 2.4rem;
  }
}

.header-2 {
  color: var(--black-col);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.26px;
}
@media only screen and (max-width: 90em) {
  .header-2 {
    font-size: 1.6rem;
  }
}

.header-3 {
  color: var(--black-col);
  font-size: 2.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.26px;
}
@media only screen and (max-width: 90em) {
  .header-3 {
    font-size: 2.3rem;
  }
}

.header-4 {
  color: var(--black-col);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 130%;
  padding-top: 0.5rem;
}

.header-5 {
  color: #040919;
  font-weight: 700;
  line-height: 130%;
}

.header-6 {
  font-weight: 500;
  font-size: 1.3rem;
  text-transform: capitalize;
}

.header-7 {
  font-family: "DM Sans, sans-serif" !important;
  color: #040919;
  font-weight: 500;
  text-transform: capitalize;
  margin-top: 8px;
}

.header-8 {
  color: var(--black-col);
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.19px;
}
@media only screen and (max-width: 90em) {
  .header-8 {
    font-size: 1.5rem;
  }
}

.header-9 {
  color: var(--welcome-font);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.17px;
}
@media only screen and (max-width: 90em) {
  .header-9 {
    font-size: 1.3rem;
  }
}

.header-10 {
  color: var(--lite-font-col);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
@media only screen and (max-width: 106.25em) {
  .header-10 {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 90em) {
  .header-10 {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 75em) {
  .header-10 {
    font-size: 1.3rem;
  }
}

.header-11 {
  color: var(--dashboard-sml-title);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.17px;
  white-space: nowrap;
}
@media only screen and (max-width: 106.25em) {
  .header-11 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 90em) {
  .header-11 {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 75em) {
  .header-11 {
    font-size: 1.7rem;
  }
}

.header-12 {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.header-13 {
  color: #555B6C;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.sml-label {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 0.8rem;
  display: inline-block;
  margin-top: 1.8rem;
  position: relative;
}
.sml-label:hover .custom-field-alert {
  visibility: visible;
}

.blue-lg-font {
  color: #2B449D;
  font-size: 2.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.26px;
}

.page-count {
  color: var(--black-col);
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans18pt-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
.header {
  grid-column: 1/25;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.4rem 0 2.4rem;
  border-bottom: 1px solid var(--lite-gray);
  grid-row: 1;
  z-index: 1111;
  position: sticky;
  top: 0;
  background: var(--background-col);
}
@media only screen and (max-width: 64em) {
  .header {
    z-index: 110;
  }
}
.header.authentication-header {
  background: transparent;
  border-bottom: 0;
}
.header__logo img {
  height: 2rem;
  width: auto;
  margin-right: 3.1rem;
}
@media only screen and (max-width: 75em) {
  .header__logo img {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .header__logo img {
    display: none;
  }
}
.header__left {
  display: flex;
  align-items: center;
}
.header__right {
  display: flex;
  align-items: center;
  justify-content: end;
}
@media only screen and (max-width: 64em) {
  .header__right {
    flex: 1;
  }
}
.header__hamburger {
  display: none;
  cursor: pointer;
}
@media only screen and (max-width: 75em) {
  .header__hamburger {
    display: flex;
    margin-right: 1.2rem;
  }
  .header__hamburger svg {
    width: 30px;
    height: 30px;
    stroke: var(--black-col);
  }
}
.header__add-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background-color: #2B449D;
  border-radius: 50%;
  border-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1.6rem;
}
@media only screen and (max-width: 37.5em) {
  .header__add-btn {
    display: none;
  }
}
.header__add-icon {
  width: 20px;
  height: 20px;
  fill: #2B449D;
  stroke: #fff;
}
.header__notification-btn {
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border-style: none;
  border: 1px solid #A5ABC3;
  margin-right: 1.6rem;
  background-color: transparent;
  cursor: pointer;
}
.header__notification-btn:hover {
  border: 1px solid #040919;
}
.header__notification-icon {
  width: 17px;
  height: 17px;
  stroke: var(--black-col);
}
.header__notification-count {
  width: 2rem;
  height: 2rem;
  background-color: #2B449D;
  color: #FFFFFF;
  position: absolute;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  top: -0.9rem;
  right: -0.7rem;
}
.header__menu-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border-style: none;
  border: 1px solid #A5ABC3;
  margin-right: 1.6rem;
  position: relative;
  cursor: pointer;
  background-color: transparent;
}
.header__menu-btn:hover {
  border: 1px solid #040919;
}
.header__menu-icon {
  width: 17px;
  height: 17px;
  stroke: var(--black-col);
  fill: var(--black-col);
}
.header__profile {
  border-style: none;
  background: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.header__profile span {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-left: 0.8rem;
  font-family: "DM Sans", sans-serif;
  min-width: 4rem;
  max-width: 18rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 37.5em) {
  .header__profile span {
    display: none;
  }
}
.header__profile-pic {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
}
.header__cheverlon {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.4rem;
  stroke: var(--black-col);
}
@media only screen and (max-width: 37.5em) {
  .header__cheverlon {
    display: none;
  }
}

.footer {
  grid-column: 1/25;
  height: 6.7rem;
  border-top: 1px solid var(--table-tr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.4rem;
  flex-direction: column;
}
.footer.report-page {
  margin-top: 0;
}
@media only screen and (max-width: 75em) {
  .footer.report-page {
    margin-top: 2.4rem;
  }
}
.footer.admin-foot {
  margin-top: 0;
}
.footer p {
  color: #555B6C;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  display: flex;
  align-items: center;
}
.footer__logo {
  width: 8rem;
  margin: 0rem 1rem;
}

.center_wrapper {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
}
@media only screen and (max-width: 75em) {
  .center_wrapper {
    min-height: unset;
  }
}

.nav-container {
  transition: left 0.4s ease-in-out;
}
@media only screen and (max-width: 75em) {
  .nav-container {
    background: var(--nav-bg);
    position: fixed;
    left: -30rem;
    top: 0;
    height: 100%;
    width: 30rem;
    z-index: 1111;
  }
}
.nav-container.active {
  left: 0;
}

.nav-close-icon {
  stroke: var(--black-col);
  padding: 1.7rem 2.6rem;
  cursor: pointer;
  display: none;
}
.nav-close-icon svg {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
}
@media only screen and (max-width: 75em) {
  .nav-close-icon {
    display: block;
  }
}

.navigation__list {
  list-style: none;
  display: flex;
}
@media only screen and (max-width: 75em) {
  .navigation__list {
    flex-direction: column;
  }
}
@media only screen and (max-width: 75em) {
  .navigation__item {
    padding: 1.4rem 2.6rem;
  }
}
.navigation__item.nav-active {
  position: relative;
  font-weight: 600;
}
@media only screen and (max-width: 75em) {
  .navigation__item.nav-active {
    border-right: 4px solid var(--color-link-hover);
    background-color: var(--nav-active-bg);
  }
}
.navigation__item.nav-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -18px;
  width: 100%;
  height: 2px;
  background-color: var(--color-link-hover);
}
@media only screen and (max-width: 90em) {
  .navigation__item.nav-active::after {
    bottom: -17px;
  }
}
@media only screen and (max-width: 75em) {
  .navigation__item.nav-active::after {
    height: 0px;
  }
}
.navigation__link {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--black-col);
  position: relative;
}
.navigation__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.8rem;
  width: 0%;
  height: 2px;
  background-color: var(--color-link-hover);
  transition: 0.3s width ease-in-out;
}
@media only screen and (max-width: 90em) {
  .navigation__link::after {
    bottom: -17px;
  }
}
@media only screen and (max-width: 75em) {
  .navigation__link::after {
    color: #555B6C;
  }
}
.navigation__link:not(:last-child) {
  margin-right: 2.4rem;
}
@media only screen and (max-width: 75em) {
  .navigation__link:not(:last-child) {
    margin-right: 0;
  }
}
@media only screen and (max-width: 85.37em) {
  .navigation__link:not(:last-child) {
    margin-right: 1.8rem;
  }
}
.navigation__link:hover {
  color: var(--color-link-hover);
}
.navigation__link:hover::after {
  width: 100%;
}
@media only screen and (max-width: 75em) {
  .navigation__link:hover::after {
    width: 0;
  }
}
.navigation__link:hover .navigation__info--icon {
  opacity: 1;
}
@media only screen and (max-width: 75em) {
  .navigation__link {
    margin-right: 0;
  }
}
.navigation__info--icon {
  width: 1.4rem;
  height: 1.4rem;
  fill: var(--card-text);
  position: absolute;
  right: 0;
  right: -13px;
  top: -5px;
  opacity: 0;
  transition: 0.3s ease-in-out;
  z-index: 11;
}
@media only screen and (max-width: 75em) {
  .navigation__info--icon {
    display: none;
  }
}
.navigation__tooltip {
  z-index: 111;
  display: none;
  position: absolute;
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  /*        white-space: nowrap;*/
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
}
@media only screen and (max-width: 75em) {
  .navigation__tooltip {
    display: none;
  }
}

.search {
  background-color: var(--search-box);
  padding: 0.9rem 1.6rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.6rem;
  margin-left: 1.6rem;
  transition: all 0.3s ease-in;
}
@media only screen and (max-width: 64em) {
  .search {
    width: 100%;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 75em) {
  .search {
    padding: 0.9rem 1.2rem;
    margin-right: 1rem;
    margin-left: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .search {
    width: auto;
    background-color: transparent;
    border: 1px solid #A5ABC3;
    width: 32px;
    height: 32px;
    border-radius: 3rem;
    justify-content: center;
  }
}
.search__input-box {
  display: flex;
  align-items: center;
}
.search__input-box input {
  background-color: transparent;
  border-style: none;
  outline: none;
}
@media only screen and (max-width: 37.5em) {
  .search__shortkey {
    display: none;
  }
}
.search__icon {
  stroke: var(--black-col);
  width: 16px;
  height: 16px;
  margin-right: 0.9rem;
}
@media only screen and (max-width: 37.5em) {
  .search__icon {
    margin-right: 0;
  }
}
.search__input {
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-left: 1rem;
  transition: all 0.3s ease-in;
}
@media only screen and (max-width: 64em) {
  .search__input {
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .search__input {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .search__input__mobile {
    display: block;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .search__mobile {
    width: 100%;
    border-radius: 0.8rem;
    justify-content: flex-start;
    width: 100%;
    margin-left: 0.7rem;
  }
}

.primary-button {
  border-radius: 4.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  background-color: #2B449D;
  color: #FFFFFF;
  border: 1px solid #2B449D;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}
@media only screen and (max-width: 37.5em) {
  .primary-button.rounded-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: unset;
    width: 35px;
    height: 35px;
  }
}
.primary-button__icon {
  width: 20px;
  height: 20px;
  stroke: #fff;
  margin-right: 6px;
}
@media only screen and (max-width: 37.5em) {
  .primary-button__icon {
    margin-right: 0;
  }
}
.primary-button:hover, .primary-button:active {
  background-color: #112673;
}
@media only screen and (max-width: 37.5em) {
  .primary-button span {
    display: none;
  }
}
.primary-button.edit-mode {
  display: none;
}
.primary-button.sm-primary {
  font-size: 1.3rem;
  padding: 0.8rem 1.3rem;
}

.secondary-button {
  border-radius: 4.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  color: var(--button-text);
  border: 1px solid var(--button-border);
  justify-content: center;
  background-color: transparent;
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
  position: relative;
}
@media only screen and (max-width: 37.5em) {
  .secondary-button {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .secondary-button.report {
    display: flex;
  }
}
@media only screen and (max-width: 37.5em) {
  .secondary-button.report-export-button {
    display: flex;
  }
}
.secondary-button__icon {
  stroke: var(--button-text);
  width: 2rem;
  height: 2rem;
  margin-right: 6px;
}
.secondary-button:hover, .secondary-button:active {
  border: 1px solid var(--black-col);
}
.secondary-button.edit-mode {
  display: none;
}

.tooltip {
  position: relative;
  cursor: pointer;
}
.tooltip__text {
  visibility: hidden;
  white-space: nowrap;
  width: fit-content;
  background-color: #333;
  font-size: 10px;
  color: #fff;
  text-align: center;
  border-radius: 7px;
  padding: 5px 8px;
  position: absolute;
  z-index: 1001;
  bottom: -3rem;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip__text.extra {
  right: unset;
  bottom: 0rem;
  max-width: 30rem;
  margin-left: 0.4rem;
}
.tooltip:hover .tooltip__text {
  visibility: visible;
  opacity: 1;
}
.tooltip:active .tooltip__text {
  visibility: hidden;
  opacity: 0;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2.7rem;
}
@media only screen and (max-width: 37.5em) {
  .progress-bar {
    margin-left: 1rem;
  }
}
.progress-bar__item-box {
  display: flex;
  flex-direction: column;
  position: relative;
}
.progress-bar__item {
  display: flex;
  align-items: center;
}
.progress-bar__circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-bottom: 1.4rem;
  font-weight: 500;
  color: #040919;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media only screen and (max-width: 48em) {
  .progress-bar__circle {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
  }
}
.progress-bar__circle svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke: #040919;
}
@media only screen and (max-width: 48em) {
  .progress-bar__circle svg {
    width: 1rem;
    height: 1rem;
  }
}
.progress-bar__line {
  width: 17rem;
  height: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 1.4rem;
  margin-left: 4px;
  margin-right: 4px;
  transition: all 0.6s ease-in-out;
}
@media only screen and (max-width: 100em) {
  .progress-bar__line {
    width: 15rem;
  }
}
@media only screen and (max-width: 90em) {
  .progress-bar__line {
    width: 14.4rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .progress-bar__line {
    width: 13rem;
  }
}
@media only screen and (max-width: 75em) {
  .progress-bar__line {
    width: 10rem;
  }
}
@media only screen and (max-width: 64em) {
  .progress-bar__line {
    width: 11rem;
  }
}
@media only screen and (max-width: 62.3125em) {
  .progress-bar__line {
    width: 8rem;
  }
}
@media only screen and (max-width: 48em) {
  .progress-bar__line {
    width: 6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .progress-bar__line {
    width: 4rem;
  }
}
.progress-bar__line--lead-details {
  width: 40rem;
}
@media only screen and (max-width: 48em) {
  .progress-bar__line--lead-details {
    width: 25rem;
  }
}
.progress-bar__label {
  width: 10rem;
  font-weight: 500;
  margin-left: -2.7rem;
  text-align: center;
}
.progress-bar__label--text {
  font-size: 1.5rem;
}
@media only screen and (max-width: 62.3125em) {
  .progress-bar__label {
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .progress-bar__label {
    margin-top: 0rem;
    font-size: 1.3rem;
  }
}
.progress-bar__days {
  width: 6.9rem;
  height: 2.6rem;
  background: var(--white-col);
  border-radius: 13px;
  border: 1px solid #a5abc3;
  margin-top: 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  padding-top: 2px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
}
@media only screen and (max-width: 48em) {
  .progress-bar__days {
    font-size: 1.2rem;
    width: 6rem;
    height: 2.2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .progress-bar__days {
    display: none;
  }
}
.progress-bar__quotation {
  padding-bottom: 4rem;
  margin-left: 0;
}
.progress-bar__quotation .progress-bar__label {
  position: absolute;
  height: 3rem;
  bottom: -3rem;
}
@media only screen and (max-width: 62.3125em) {
  .progress-bar__quotation .progress-bar__label {
    bottom: -4rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .progress-bar__quotation .progress-bar__line {
    width: 15rem;
  }
}
@media only screen and (max-width: 64em) {
  .progress-bar__quotation .progress-bar__line {
    width: 12rem;
  }
}
@media only screen and (max-width: 62.3125em) {
  .progress-bar__quotation .progress-bar__line {
    width: 7.5rem;
  }
}
@media only screen and (max-width: 48em) {
  .progress-bar__quotation .progress-bar__line {
    width: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .progress-bar__quotation .progress-bar__line {
    width: 3.2rem;
  }
}
@media only screen and (max-width: 23.4em) {
  .progress-bar__quotation .progress-bar__line {
    width: 2.6rem;
  }
}

.done {
  background: #A0CC16;
  transition: all 0.4s ease-in;
}

.fail {
  background: #D72F4D;
  transition: all 0.4s ease-in;
}

.leadWin {
  background: #108E63;
  transition: all 0.4s ease-in;
}

.pend {
  background: #cdd1e4;
}

.line-done {
  background: repeating-linear-gradient(90deg, #A0CC16, #A0CC16 2px, transparent 2px, transparent 5px);
}

.line-pend {
  background: repeating-linear-gradient(90deg, #cdd1e4, #cdd1e4 2px, transparent 2px, transparent 5px);
}

.line-half {
  background: repeating-linear-gradient(90deg, #A0CC16, #A0CC16 2px, transparent 2px, transparent 5px) 0 0/50% 100%, repeating-linear-gradient(90deg, #cdd1e4, #cdd1e4 2px, transparent 2px, transparent 5px) 0 50%/100% 100%;
  background-repeat: no-repeat;
}

.primary-button {
  border-radius: 4.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  background-color: #2B449D;
  color: #FFFFFF;
  border: 1px solid #2B449D;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}
@media only screen and (max-width: 37.5em) {
  .primary-button.rounded-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: unset;
    width: 35px;
    height: 35px;
  }
}
.primary-button__icon {
  width: 20px;
  height: 20px;
  stroke: #fff;
  margin-right: 6px;
}
@media only screen and (max-width: 37.5em) {
  .primary-button__icon {
    margin-right: 0;
  }
}
.primary-button:hover, .primary-button:active {
  background-color: #112673;
}
@media only screen and (max-width: 37.5em) {
  .primary-button span {
    display: none;
  }
}
.primary-button.edit-mode {
  display: none;
}
.primary-button.sm-primary {
  font-size: 1.3rem;
  padding: 0.8rem 1.3rem;
}

.secondary-button {
  border-radius: 4.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  color: var(--button-text);
  border: 1px solid var(--button-border);
  justify-content: center;
  background-color: transparent;
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
  position: relative;
}
@media only screen and (max-width: 37.5em) {
  .secondary-button {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .secondary-button.report {
    display: flex;
  }
}
@media only screen and (max-width: 37.5em) {
  .secondary-button.report-export-button {
    display: flex;
  }
}
.secondary-button__icon {
  stroke: var(--button-text);
  width: 2rem;
  height: 2rem;
  margin-right: 6px;
}
.secondary-button:hover, .secondary-button:active {
  border: 1px solid var(--black-col);
}
.secondary-button.edit-mode {
  display: none;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8rem;
  grid-column: 1/25;
  grid-row: 1;
  /*    @include respond(phone-land) {
          flex-direction: column;
          align-items: flex-start;
      }*/
}
.page-header__right {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 48em) {
  .page-header__right {
    margin-top: 2rem;
  }
}
.page-header__button--icon {
  width: 2rem;
  height: 1.6rem;
  stroke: var(--black-col);
  margin-right: 0.8rem;
}
.page-header__button.edit-mode {
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .page-header__button {
    display: flex;
    padding: 1rem 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .page-header__button span {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .page-header__button svg {
    margin-right: 0;
  }
}
.page-header__kebab-button {
  border-radius: 48px;
  border: 1px solid #A5ABC3;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-header__dropdown {
  position: relative;
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .page-header__dropdown {
    display: block;
  }
}
@media only screen and (max-width: 64em) {
  .page-header__dropdown.desktop-view {
    display: none;
  }
}
.page-header__dropdown--menu {
  background-color: var(--white-col);
  position: absolute;
  right: 15px;
  bottom: -6rem;
  z-index: 111;
  padding: 2px;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  width: 18rem;
  display: none;
  cursor: pointer;
}
.page-header__dropdown--menu--list {
  list-style: none;
}
.page-header__dropdown--menu--item {
  padding: 1.3rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--black-col);
  display: flex;
  align-items: center;
  transition: 0.3s background-color ease-in;
}
.page-header__dropdown--menu--item svg {
  margin-left: 1.5rem;
}
.page-header__dropdown--menu--item:hover {
  background-color: var(--card-color);
}
.page-header__dropdown.show .page-header__dropdown--menu {
  display: block;
}

.import-btn {
  margin-right: 0.8rem;
}
.import-btn__icon {
  width: 1.6rem;
  height: 1.5rem;
  stroke: var(--button-text);
  margin-right: 0.7rem;
}
.import-btn__cheverlon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--button-text);
  margin-left: 1.1rem;
}
.import-btn:hover svg {
  stroke: #FFFFFF;
}

.search-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5.6rem;
  background-color: var(--filter-bar-bg);
  border: 1px solid var(--filter-bar-border);
  border-radius: 1.8rem;
  padding: 0 1.6rem;
  grid-column: 1/25;
}
.search-filters__left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-filters .searchbox-container {
  margin-right: 1.6rem;
}
.search-filters .searchbox-container.table-search {
  display: none;
}
@media only screen and (max-width: 75em) {
  .search-filters .searchbox-container.table-search {
    display: block;
  }
}
.search-filters .searchbox-container.quotation-history {
  margin-right: 0;
}
.search-filters .searchbox-container.interaction-history {
  margin-right: 0;
}
@media only screen and (max-width: 37.5em) {
  .search-filters .searchbox-container {
    margin-right: 0;
  }
}
.search-filters__right {
  display: flex;
  align-items: center;
}

.searchbox {
  display: flex;
  align-items: center;
  height: 3.2rem;
  padding-left: 1.2rem;
  border-radius: 0.8rem;
  border: 1px solid var(--button-border);
  width: 32.6rem;
  transition: 0.3s all ease-in-out;
}
.searchbox.searchbox-report {
  width: 100%;
}
@media only screen and (max-width: 62.3125em) {
  .searchbox.searchbox-report {
    display: none;
  }
}
@media only screen and (max-width: 48em) {
  .searchbox.searchbox-report {
    display: none;
  }
}
.searchbox.searchbox-phone {
  display: none;
}
@media only screen and (max-width: 64em) {
  .searchbox.searchbox-phone {
    display: none;
  }
}
@media only screen and (max-width: 62.3125em) {
  .searchbox.searchbox-phone {
    display: flex;
  }
}
@media only screen and (max-width: 48em) {
  .searchbox.searchbox-phone {
    display: flex;
  }
}
.searchbox input {
  font-family: "DM Sans", sans-serif;
  border-style: none;
  outline: none;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  width: 100%;
  transition: 0.3s all ease-in-out;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .searchbox input {
    margin-left: 1rem;
    width: 0;
    transition: 0.3s all ease-in-out;
    display: none;
  }
  .searchbox input.table-input {
    display: block;
    width: 100%;
    transition: all 0.3s ease-in-out;
  }
}
.searchbox input::placeholder {
  color: #7C849C;
  font-size: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
@media only screen and (max-width: 90em) {
  .searchbox {
    width: 22rem;
  }
  .searchbox.expand {
    width: 32rem;
  }
}
@media only screen and (max-width: 75em) {
  .searchbox {
    width: 17rem;
  }
}
@media only screen and (max-width: 64em) {
  .searchbox {
    width: 17rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .searchbox {
    width: 100%;
    padding-left: 0;
    padding: 0.5rem;
    border-radius: 3rem;
  }
  .searchbox.expand {
    width: 30rem;
  }
  .searchbox svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  .searchbox__table {
    border-radius: 0.6rem;
  }
}

.user-filter {
  position: relative;
  display: flex;
  align-items: center;
}
.user-filter__avatars {
  display: flex;
}
.user-filter__avatars--img {
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  margin-left: 1rem;
}
.user-filter__avatars--img.no-img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 500;
}
.user-filter__avatars--circle {
  position: relative;
}
.user-filter__avatars--circle:hover {
  z-index: 111;
}
.user-filter__avatars--circle input {
  display: none;
}
.user-filter__avatars--circle input[type=checkbox]:checked + .user-avatar {
  border: 2px solid var(--user-filter-active);
}
@media only screen and (max-width: 37.5em) {
  .user-filter {
    display: none;
  }
}
.user-filter__list {
  min-width: 23rem;
  list-style-type: none;
  padding: 10px;
  margin: 0;
  position: absolute;
  top: 100%;
  right: 0;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 100;
  border-radius: 10px;
  border: 1px solid #F8F9FB;
  background: #FFFFFF;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
}
.user-filter__list__item {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
}
.user-filter__list__item img {
  margin-left: 1rem;
}
.user-filter__list__item span {
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  margin-left: 1.2rem;
}
.user-filter__list__search {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
.user-filter__list__search__input {
  border-style: none;
  outline: none;
  color: #7C849C;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.user-filter__list__search .search-icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.8rem;
}
.user-filter .user-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5.6rem;
  border: 2px solid var(--user-filter-border);
  margin-right: -0.5rem;
}
@media only screen and (max-width: 90em) {
  .user-filter .user-avatar {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 75em) {
  .user-filter .user-avatar {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.user-filter .user-avatar:hover {
  outline: 2px solid #FFFFFF;
  z-index: 1;
}
.user-filter .user-avatar.active {
  outline: 2px solid var(--user-filter-active);
}
.user-filter .user-avatar.no-img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 1.5rem;
}
@media only screen and (max-width: 90em) {
  .user-filter .user-avatar.no-img {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 75em) {
  .user-filter .user-avatar.no-img {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.user-filter .view-all-users {
  border-radius: 1.6rem;
  border: 2px solid var(--user-filter-viewall-border);
  background: var(--user-filter-viewall-bg);
  width: 3.5rem;
  height: 3.5rem;
  color: var(--black-col);
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
}
.user-filter .view-all-users.active {
  border: 2px solid #2B449D;
}
@media only screen and (max-width: 90em) {
  .user-filter .view-all-users {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 75em) {
  .user-filter .view-all-users {
    width: 2.8rem;
    height: 2.8rem;
  }
}
@media only screen and (max-width: 64em) {
  .user-filter {
    display: none;
  }
}

.filter-dropdown {
  position: relative;
}
@media only screen and (max-width: 64em) {
  .filter-dropdown {
    display: none;
  }
}
.filter-dropdown__filter {
  stroke: var(--black-col);
  width: 1.4rem;
  height: 1.4rem;
}
.filter-dropdown.filtering span {
  margin-right: 0;
}
@media only screen and (max-width: 48em) {
  .filter-dropdown.filtering span {
    display: none;
  }
}
.filter-dropdown.filtering svg {
  margin-left: 0;
  margin-right: 0.8rem;
}
@media only screen and (max-width: 48em) {
  .filter-dropdown.filtering svg {
    margin-right: 0;
    width: 1.6rem;
    height: 1.6rem;
  }
}
.filter-dropdown__button {
  border-radius: 4.8rem;
  background-color: transparent;
  border: 1px solid var(--filter-bar-border);
  padding: 0.6rem 1rem;
  color: var(--button-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  position: relative;
  cursor: pointer;
}
@media only screen and (max-width: 37.5em) {
  .filter-dropdown__button {
    border-radius: 3rem;
    padding: 0.8rem;
  }
}
.filter-dropdown__button--name {
  margin-right: 0.6rem;
  white-space: nowrap;
}
.filter-dropdown__button--icon {
  margin-left: 0;
}
.filter-dropdown__content {
  display: none;
  min-width: 22rem;
  position: absolute;
  top: 115%;
  left: 0;
  z-index: 107;
  border-radius: 1rem;
  border: 1px solid var(--dropdown-border);
  background: var(--table-container);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  max-height: 24rem;
  overflow-y: auto;
}
.filter-dropdown__content.last-content {
  left: unset;
  right: 0;
}
.filter-dropdown__content::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.filter-dropdown__content::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.filter-dropdown__content__leads {
  max-height: unset;
}
.filter-dropdown__content.show {
  display: block;
}
.filter-dropdown__list {
  list-style: none;
}
.filter-dropdown__item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.filter-dropdown__item:hover {
  background-color: var(--dropdown-hover);
}
.filter-dropdown__item--name {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  margin-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 17rem;
  display: inline-block;
}
.filter-dropdown__item-count {
  position: absolute;
  top: -8px;
  right: 0px;
  background: #2B449D;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #FFFFFF;
  font-weight: 500;
}
.filter-dropdown__days {
  flex-direction: column;
}
.filter-dropdown__days .filter-dropdown-day {
  display: block;
  font-size: 1.4rem;
}
.filter-dropdown__days .filter-dropdown-day__details {
  font-size: 1rem;
  display: block;
}
.filter-dropdown__days .filter-dropdown-day__datePicker {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}
.filter-dropdown__count {
  font-size: 1rem;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #E5E8F2;
  margin-left: 0.5rem;
  color: #040919;
}

.filter-search-box {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  font-size: 1.5rem;
}
.filter-search-box__input {
  border-style: none;
  outline: none;
  color: #7C849C;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  background-color: transparent;
}

.assignee-filter__checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.assignee-filter__checkbox .checkmark {
  color: #040919;
  font-size: 14px;
  display: none;
}
.assignee-filter .selected .assignee-filter__checkbox .checkmark {
  display: block;
}

.close-icon-btn {
  stroke: var(--black-col);
  width: 1rem;
  height: 1rem;
}

.date-picker label {
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  color: #555B6C;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.date-picker__inputbox {
  width: 24rem;
  position: relative;
  padding: 5px 0;
  border-bottom: 1px solid #A5ABC3;
  cursor: pointer;
}
@media only screen and (max-width: 75em) {
  .date-picker__inputbox {
    width: 21rem;
  }
}
.date-picker__inputbox input {
  width: 100%;
  border-style: none;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
  outline: none;
  z-index: 2;
  position: relative;
  background-color: transparent;
}
.date-picker .phone {
  width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0 20px;
  border-style: none;
}
.date-picker__calendarIcon {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--black-col);
  position: absolute;
  right: 0;
  z-index: 3;
}

.flatpickr-day {
  border-radius: 0;
  border: none;
  height: 40px;
  line-height: 40px;
}

.flatpickr-day.selected {
  background-color: #2B449D !important;
  color: #FFFFFF;
}

.flatpickr-day.startRange.startRange {
  border-radius: 0;
}

.flatpickr-day.endRange.endRange {
  border-radius: 0;
}

.column-btn {
  display: flex;
  align-items: center;
  border-radius: 4.8rem;
  background-color: transparent;
  border: 1px solid var(--filter-bar-border);
  padding: 0.6rem 1rem;
  margin-right: 0.8rem;
  position: relative;
  cursor: pointer;
}
@media only screen and (max-width: 48em) {
  .column-btn {
    padding: 0.8rem;
  }
}
.column-btn span {
  color: var(--button-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
@media only screen and (max-width: 48em) {
  .column-btn span {
    display: none;
  }
}
.column-btn svg {
  width: 1.3rem;
  height: 1.4rem;
  stroke: var(--button-text);
  margin-right: 0.6rem;
}
@media only screen and (max-width: 48em) {
  .column-btn svg {
    margin-right: 0;
  }
}
@media only screen and (max-width: 48em) {
  .column-btn svg {
    width: 1.6rem;
    height: 1.6rem;
  }
}

.main-table {
  min-width: 100%;
  border-spacing: 0;
  overflow-x: hidden;
}
.main-table__firstrow {
  background: var(--table-head);
}
.main-table__firstrow th:last-of-type .main-table__sortBtn {
  padding-right: 1rem;
}
.main-table__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0 1.2rem 1.6rem;
}
.main-table__head span {
  color: var(--table-data-col);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  white-space: nowrap;
}
.main-table__head:last-child {
  padding-right: 5px;
}
.main-table__sortBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 4rem;
}
.main-table__sortBtn svg {
  width: 0.6rem;
  height: 0.7rem;
  fill: var(--table-data-col);
}
.main-table__sortBtn svg:active {
  fill: #2B449D;
}
.main-table__detailsRow {
  position: relative;
}
.main-table__detailsRow td {
  border-bottom: 1px solid var(--table-border-lte);
  padding: 1.6rem 0 1.2rem 1.6rem;
  color: var(--table-data-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  /*       line-height: 130%;*/
  white-space: nowrap;
}
.main-table__detailsRow:hover .main-table__hoverBox {
  opacity: 1;
  margin-top: 0;
}
.main-table__hoverBox {
  position: absolute;
  /*  min-width: calc(100vw - 5rem);
  left: 0;*/
  left: calc(100vw - 7rem);
  /*background-color: #d8dcec1c;*/
  opacity: 0;
  margin-top: 10px;
  transition: ease-in-out 0.3s all;
  border-style: none !important;
}
.main-table__hoverBox.settings-table-hoverbox {
  left: calc(100vw - 6rem);
  right: unset !important;
  /*            @include respond(desktop) {
      left: calc(100vw - 38rem);
  }

  @include respond(desktop-M) {
      left: calc(100vw - 36rem);
  }

  @include respond(standard-laptop) {
      left: calc(100vw - 34rem);
  }

  @include respond(laptop) {
      left: calc(100vw - 42rem);
  }

  @include respond(medium-laptop) {
      left: calc(100vw - 39rem);
  }

  @include respond(tab-land) {
      left: calc(100vw - 37rem);
  }

  @include respond(tab-port) {
      left: calc(100vw - 35rem);
  }

  @include respond(tab-medium) {
      left: calc(100vw - 10rem);
  }

  @include respond(phone-land) {
      left: calc(100vw - 10rem);
  }

  @include respond(phone ) {
      left: calc(100vw - 9rem);
  }*/
}
.main-table__hoverBox.settings-table-hoverbox .main-table__hover-btns {
  padding: 0.9rem 1rem;
  gap: 0.8rem;
}
@media only screen and (max-width: 90em) {
  .main-table__hoverBox.settings-table-hoverbox .main-table__hover-btns {
    top: -14px;
  }
}
.main-table__hoverRelativeDiv {
  position: relative;
}
.main-table__hover-btns {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: absolute;
  right: 0;
  background-color: var(--table-hover-btns);
  padding: 13px;
  padding-right: 2.5rem;
  top: -15px;
}
@media only screen and (max-width: 90em) {
  .main-table__hover-btns {
    padding: 1.1rem;
    top: -12px;
    right: 1rem;
  }
}
@media only screen and (max-width: 48em) {
  .main-table__hover-btns {
    padding: 1.1rem;
    top: -11px;
  }
}
@media only screen and (max-width: 37.5em) {
  .main-table__hover-btns {
    padding: 1.1rem;
    top: -11px;
  }
}
.main-table__hover-btn {
  padding: 0.6rem 1rem;
  background-color: #2B449D;
  border-style: none;
  display: flex;
  align-items: center;
  border-radius: 1.6rem;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.main-table__hover-btn svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #FFFFFF;
  margin-right: 0.6rem;
}
.main-table__hover-btn span {
  color: #FFFFFF;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.main-table__hover-btn:hover {
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.main-table__hoverDropdown {
  border-style: none;
  position: relative;
  background-color: transparent;
  cursor: pointer;
}
.main-table__hoverDropdown svg {
  width: 0.4rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.main-table__dropdownitems {
  position: absolute;
  background-color: var(--kebab-bg);
  z-index: 111;
  padding: 2px;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  display: none;
}
.main-table__dropdownitems ul {
  list-style: none;
  border-radius: 0.5rem;
}
.main-table__dropdownitems li {
  padding: 0.6rem 2rem;
  width: 14rem;
  background-color: var(--kebab-bg);
  text-align: left;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.main-table__dropdownitems li span {
  white-space: nowrap;
  color: var(--black-col);
}
.main-table__dropdownitems li:hover {
  background-color: var(--kebab-link-hover);
}
.main-table__dropdownitems li svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  margin-right: 1rem;
}
.main-table__dropdownitems.show {
  display: block;
}
.main-table__dropdownitems.top {
  bottom: 100%;
  top: auto;
  left: 0;
}
.main-table__dropdownitems.persuite-dropdown-menu {
  right: 0 !important;
  left: auto !important;
}
.main-table__checkbox {
  position: relative;
  z-index: 200;
}
.main-table__priority-column {
  display: flex;
  align-items: center;
}
.main-table__priority-name {
  color: var(--table-data-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  display: inline-block;
  margin-left: 0.8rem;
}
.main-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7rem;
  padding: 0 2rem;
}
.main-table__footer.users-foot {
  background: #E5E8F2;
}
@media only screen and (max-width: 48em) {
  .main-table__footer {
    justify-content: center;
    flex-direction: column;
  }
}

.status-icons {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.status-icons.hot {
  background-color: #D72F4D;
}
.status-icons.cold {
  background-color: #398CD0;
}
.status-icons.warm {
  background-color: #D2862C;
}
.status-icons svg {
  width: 1.5rem;
  height: 1.5rem;
}
.status-icons__icon {
  fill: #FFFFFF;
}
.status-icons__hide {
  display: none;
}

.profile {
  display: flex;
  align-items: center;
  position: relative;
}
.profile__icon {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #040919;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  margin-right: 0.6rem;
}
.profile__icon.icon-lg {
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.4rem;
}
.profile__img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  margin-right: 0.6rem;
}
.profile__name {
  color: var(--table-data-col);
  word-break: break-word;
}
.profile__hot-icon {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  bottom: -0.3rem;
  left: 1.4rem;
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  align-items: center;
}
.breadcrumb__item:not(:last-child) {
  margin-right: 4px;
}
.breadcrumb__link {
  text-decoration: none;
  color: var(--head-primary-color);
  font-weight: 500;
}

.edit-button {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid #a5abc3;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  stroke: #040919;
  transition: all 0.3s;
  margin-right: 8px;
}
.edit-button:hover, .edit-button:active {
  background: #2B449D;
  border: none;
  stroke: #fff;
}
.edit-button:active {
  scale: 0.95;
}
.edit-button__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.edit-button__close-icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}

.custom-input {
  display: block;
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  color: var(--black-col);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  border-bottom: 1px solid transparent;
  -moz-appearance: textfield;
}
.custom-input::placeholder {
  display: block;
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  color: #8b8b8b;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  border-bottom: 1px solid transparent;
}
.custom-input__editable {
  border-bottom: 1px solid #A5ABC3;
}

.website-share {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.website-share input {
  cursor: pointer;
  color: var(--head-primary-color);
  width: fit-content;
}
.website-share__editable {
  cursor: text;
}

.website-share--icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: #2B449D;
}

a.Web-width.website-share {
  width: 100%;
}

.button-workflow {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid #a5abc3;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  stroke: #040919;
  transition: all 0.3s;
  margin-right: 8px;
}
.button-workflow:hover, .button-workflow:active {
  background: #2B449D;
  border: none;
  stroke: #fff;
}
.button-workflow:active {
  scale: 0.95;
}
.button-workflow__icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--black-col);
}
@media only screen and (max-width: 64em) {
  .button-workflow__icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.button-workflow__icon svg rect {
  width: 3rem;
  height: 3rem;
}
.button-workflow.edit-mode {
  display: none;
}

.profile-big {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.profile-big__icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #ad84e1;
  margin-right: 8px;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-big__name {
  font-weight: 500;
  text-transform: capitalize;
}

.drop-down-item {
  margin-right: 6px;
  display: inline-block;
  margin-top: 8px;
}
.drop-down-item__box {
  height: 2.6rem;
  border-radius: 1.3rem;
  padding: 0 1rem;
  background: #f2f3fa;
  border: 1px solid #a5abc3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-down-item__icon {
  height: 1.2rem;
  width: 1.2rem;
  stroke: #555b6c;
  margin-right: 4px;
}
.drop-down-item__text {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: capitalize;
}

.info-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.info-header__icon {
  height: 1rem;
  width: 1.2rem;
  margin-right: 8px;
  margin-left: 4px;
  fill: var(--head-primary-color);
}
.info-header__text {
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--head-primary-color);
}

.key-details {
  background-color: #2B449D;
  color: #fff;
  padding: 8rem;
  border-radius: 1.8rem;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.key-details::before {
  content: "";
  display: block;
  position: absolute;
  width: 30rem;
  height: 30rem;
  top: -130px;
  right: -130px;
  background-image: radial-gradient(transparent 0 20px, rgba(255, 255, 255, 0.05) 20px 34px, transparent 34px 52px, rgba(255, 255, 255, 0.04) 52px 62px, transparent 62px 82px, rgba(255, 255, 255, 0.03) 82px 90px, transparent 90px 114px, rgba(255, 255, 255, 0.02) 114px 120px, transparent 120px 140px);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination__button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0 1rem;
  color: var(--button-text);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .pagination__button {
    margin: 0 0.6rem;
  }
}
@media only screen and (max-width: 23.4em) {
  .pagination__button span {
    display: none;
  }
}
.pagination__icon {
  width: 0.8rem;
  height: 1.2rem;
  stroke: var(--button-text);
}
.pagination__pages {
  display: flex;
  align-items: center;
}
.pagination__page {
  margin: 0 0.7rem;
  cursor: pointer;
  color: var(--button-text);
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  width: 2rem;
}
.pagination__page.pgActive {
  display: flex;
  width: 3rem;
  height: 3rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--active-col-text);
  background-color: var(--active-col);
  border-radius: 50%;
}
.pagination__ellipsis {
  margin: 0 0.3rem;
  width: 2rem;
  height: 2rem;
}

.pagination-info {
  display: flex;
  align-items: center;
  color: var(--pagination-info);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
@media only screen and (max-width: 64em) {
  .pagination-info.campaign-detail {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .pagination-info {
    margin-bottom: 1rem;
  }
}
.pagination-info__select-box {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}
.pagination-info__select-box::after {
  content: "";
  background-image: url(/images/icons/btm-stroke.png);
  position: absolute;
  top: 75%;
  right: 0px;
  pointer-events: none;
  transform: translateY(-50%) rotate(0deg);
  font-size: 2rem;
  font-weight: 700;
  color: var(--button-text);
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
}
.pagination-info select {
  appearance: none;
  padding: 0.5rem 2.3rem 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 1.4rem;
  background: var(--table-container);
  outline: none;
  border-radius: 0.5rem;
  border: 1px solid var(--table-border);
  color: var(--black-col);
}
.pagination-info select.users-select {
  background: #E5E8F2;
}

.user-list-delete {
  display: flex;
  align-items: center;
}
.user-list-delete__count {
  color: var(--user-delete-text);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  white-space: nowrap;
}
@media only screen and (max-width: 37.5em) {
  .user-list-delete__count span {
    display: none;
  }
}
.user-list-delete__button {
  border-style: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
  color: var(--user-delete-button);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
}
@media only screen and (max-width: 37.5em) {
  .user-list-delete__button span {
    display: none;
  }
}
.user-list-delete__button svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--user-delete-button);
  margin-right: 0.6rem;
}
@media only screen and (max-width: 90em) {
  .user-list-delete__button {
    margin-left: 1.2rem;
  }
}
@media only screen and (max-width: 75em) {
  .user-list-delete__button {
    margin-left: 1.2rem;
  }
}

.custom-filters {
  border-style: none;
  width: 27rem;
  border-bottom: 1px solid #A5ABC3;
  border-radius: 0;
}
.custom-filters__item {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  color: #555B6C;
}

.list-status__box {
  width: 12rem;
  padding: 0.4rem 0;
  text-align: center;
  border-radius: 1.3rem;
  color: var(--black-col);
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 2rem;
}
.list-status__box.inner-page {
  padding: 0.6rem 1rem;
  display: inline-flex;
  justify-content: center;
}
.list-status__box.qualified {
  border: 1px solid var(--status-qualified-border);
  background-color: var(--status-qualified-color);
}
.list-status__box.contacted {
  border: 1px solid var(--status-contacted-border);
  background: var(--status-contacted-color);
}
.list-status__box.new {
  border: 1px solid var(--status-new-border);
  background: var(--status-new-color);
}
.list-status__box.proposal {
  border: 1px solid var(--status-proposal-border);
  background: var(--status-proposal-background);
}
.list-status__box.negotiation {
  border: 1px solid var(--status-negotiation-border);
  background: var(--status-negotiation-background);
}
.list-status__box.win {
  border: 1px solid var(--status-win-border);
  background: var(--status-win-color);
}
.list-status__box.loss {
  border: 1px solid var(--status-loss-border);
  background: var(--status-loss-color);
}
.list-status__box.quotation {
  border: 1px solid var(--status-pending-border);
  background: var(--status-pending-color);
}
.list-status__box.overdue {
  border: 1px solid var(--status-overdue-border);
  background-color: var(--status-overdue-color);
}
.list-status__box.done {
  border: 1px solid var(--status-done-border);
  background-color: var(--status-done-color);
}
.list-status__box.default {
  border: 1px solid var(--status-default-border);
  background: var(--status-default-color);
}
.list-status__box.active {
  border: 1px solid var(--status-acive-border);
  background: var(--status-active-color);
}
.list-status__box.inactive {
  border: 1px solid var(--status-inactive-border);
  background: var(--status-inactive-color);
}
.list-status__box.converted {
  border: 1px solid #8bcb24;
  background: rgba(139, 203, 36, 0.4117647059);
}
.list-status__box.planning {
  border: 1px solid var(--status-qualified-border);
  background-color: var(--status-qualified-color);
}
.list-status__box.inprogress {
  border: 1px solid var(--status-pending-border);
  background: var(--status-pending-color);
}
.list-status__box.completed {
  border: 1px solid var(--status-acive-border);
  background: var(--status-active-color);
}
.list-status__box.open {
  border: 1px solid var(--status-qualified-border);
  background-color: var(--status-qualified-color);
}
.list-status__box.rejected {
  border: 1px solid var(--status-rejected-color);
  background: var(--status-rejected-border);
}
.list-status__box.accepted {
  border: 1px solid #8bcb24;
  background: rgba(139, 203, 36, 0.4117647059);
}
.list-status__box.closed {
  border: 1px solid var(--status-loss-border);
  background: var(--status-loss-color);
}
.list-status__box.authorization {
  border: 1px solid var(--authorization-border);
  background: var(--authorization-bg);
}
.list-status__box.pending {
  border: 1px solid var(--pending1-border);
  background: var(--pending1-bg);
}
.list-status__box.revise {
  border: 1px solid var(--revise-border);
  background: var(--revise-bg);
}
.list-status__box.revised {
  border: 1px solid var(--revised-border);
  background: var(--revised-bg);
}
.list-status__box.expired {
  border: 1px solid var(--expired-border);
  background: var(--expired-bg);
}
.list-status__box.draft {
  border: 1px solid #a34703;
  background: rgba(163, 71, 3, 0.5490196078);
}
.list-status__box.in-progress {
  border: 1px solid var(--status-pending-border);
  background: var(--status-pending-color);
}
.list-status__box.approval {
  border: 1px solid var(--border-approval);
  background-color: var(--approval-bg);
}
.list-status__box.sent {
  border: 1px solid var(--border-sent);
  background-color: var(--sent-bg);
}
.list-status__box.rejected-in-approval {
  border: 1px solid var(--status-loss-border);
  background: var(--status-loss-color);
  width: 16rem;
}
.list-status__box.upcoming {
  border: 1px solid var(--status-upcoming-border);
  background: var(--status-upcoming-bg);
}
.list-status__box.approval.rejected {
  border: 1px solid var(--status-rejected-color);
  background: rgba(255, 0, 0, 0.6705882353);
}
.list-status__box.approval-rejected {
  padding: 4px 16px;
  border: 1px solid var(--status-rejected-color);
  background: rgba(255, 0, 0, 0.6705882353);
  width: max-content;
}
.list-status__box.cancelled {
  border: 1px solid var(--cancelled-border-color);
  background: var(--cancelled-color);
}
.list-status__box.failed {
  border: 1px solid var(--failed-border-color);
  background: var(--failed-color);
}
.list-status__box.postponed {
  border: 1px solid var(--postponed-border-color);
  background: var(--postponed-color);
}

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 111;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.overlay.show {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.mobile-filters {
  background-color: transparent;
  border: 1px solid #A5ABC3;
  color: #040919;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  position: relative;
  cursor: pointer;
  display: none;
  align-items: center;
  border-radius: 3rem;
  padding: 0.8rem;
}
@media only screen and (max-width: 64em) {
  .mobile-filters.report-mobile-filter {
    display: flex;
  }
}
.mobile-filters svg {
  margin-right: 0;
  width: 1.6rem;
  height: 1.6rem;
}
@media only screen and (max-width: 64em) {
  .mobile-filters {
    display: flex;
  }
}

.filter-offcanvas {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--table-container);
  transition: right 0.3s ease;
  z-index: 1000;
  padding: 20px;
}
.filter-offcanvas.open {
  right: 0;
}
.filter-offcanvas__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
}
.filter-offcanvas__close svg {
  width: 2.2rem;
  height: 2.2rem;
}
@media only screen and (max-width: 37.5em) {
  .filter-offcanvas__close svg {
    width: 2rem;
    height: 2rem;
  }
}
.filter-offcanvas__title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--black-col);
  margin-bottom: 4rem;
}
.filter-offcanvas__name {
  color: #555B6C;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.filter-offcanvas__filter {
  padding: 1.4rem 0 2.8rem;
}

.mobile-days-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.mobile-days-filter__option {
  padding: 0.8rem 1.6rem;
  border-radius: 3rem;
  border: 1px solid #CDD1E4;
  background-color: #FFFFFF;
  color: #040919;
  cursor: pointer;
  font-size: 1.6rem;
  outline: none;
  transition: background-color 0.3s, color 0.3s;
}
.mobile-days-filter__option[ischecked=true] {
  background-color: #0c0c17;
  color: #ffffff;
  border: none;
}
.mobile-days-filter__option.dayActive {
  background-color: #0c0c17;
  color: #ffffff;
  border: none;
}
.mobile-days-filter__option:hover {
  border-color: #a4a9b3;
}

.filter-accordion__item {
  margin-bottom: 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--button-border);
}
.filter-accordion__header {
  background-color: transparent;
  width: 100%;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  position: relative;
}
.filter-accordion__header.filterActive .accordion-chevron {
  transform: rotate(180deg);
}
.filter-accordion__header.filterActive h5 {
  font-weight: 600;
  color: var(--black-col);
}
.filter-accordion__header .accordion-chevron {
  width: 2.4rem;
  height: 2.4rem;
  transition: transform 0.3s ease;
}
.filter-accordion__content {
  max-height: 0;
  background-color: var(--card-color);
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.filter-accordion__content--options {
  display: flex;
  flex-wrap: wrap;
  max-height: 16rem;
  overflow-y: auto;
  padding-bottom: 1.5rem;
}
.filter-accordion__content--options::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.filter-accordion__content--options::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.filter-accordion__search-box {
  border-radius: 1rem;
  border: 1px solid var(--button-border);
  padding: 1rem;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.filter-accordion__search-box input {
  margin-left: 1rem;
}
.filter-accordion__ul {
  display: flex;
  flex-wrap: wrap;
  max-height: 20rem;
  overflow-y: auto;
  padding-bottom: 1.5rem;
}
.filter-accordion__ul::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.filter-accordion__ul::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.filter-accordion__ul li {
  width: 33%;
}
@media only screen and (max-width: 37.5em) {
  .filter-accordion__ul li {
    width: 50%;
  }
}
.filter-accordion .assignee-filter li {
  width: 33%;
}
@media only screen and (max-width: 37.5em) {
  .filter-accordion .assignee-filter li {
    width: 50%;
  }
}
.filter-accordion__count {
  position: absolute;
  top: 0;
  right: 2.5rem;
  width: 2rem;
  height: 2rem;
  background: var(--black-col);
  color: var(--white-col);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.toggle-switch {
  position: relative;
  display: none;
  width: 38px;
  height: 22px;
  pointer-events: none;
}
.toggle-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch__input:checked + .toggle-switch__slider {
  background-color: #0d3a97;
}
.toggle-switch__input:checked + .toggle-switch__slider::before {
  transform: translateX(16px);
}
.toggle-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.toggle-switch__slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.toggle-switch.Toggleeditable {
  display: inline-block;
}
.toggle-switch.toggle-pointer-event {
  pointer-events: all;
  display: inline-block;
}

.custom-toggle-buttons {
  pointer-events: none;
}
.custom-toggle-buttons.editable {
  pointer-events: all;
  cursor: pointer !important;
}
.custom-toggle-buttons.editable .sml-label {
  cursor: pointer;
}

.left-sidebar {
  grid-column: 1/5;
  min-height: calc(100vh - 13.5rem);
}
@media only screen and (max-width: 64em) {
  .left-sidebar {
    grid-column: 1/7;
    min-height: auto;
    border-radius: 1.8rem;
    overflow: hidden;
    grid-row: 2;
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .left-sidebar {
    grid-column: 1/25;
    background-color: var(--card-color);
  }
}

.center-area {
  grid-column: 5/21;
  padding: 0 2.4rem;
  overflow: hidden;
}
@media only screen and (max-width: 90em) {
  .center-area {
    padding: 0 1.6rem;
  }
}
@media only screen and (max-width: 64em) {
  .center-area {
    padding: 0 0 0 1.6rem;
    grid-column: 7/25;
    grid-row: 2/5;
  }
}
@media only screen and (max-width: 37.5em) {
  .center-area {
    grid-column: 1/25;
    grid-row: 3/4;
    padding: 0;
  }
}
.center-area__box {
  width: 100%;
  height: 100%;
  background-color: var(--card-color);
  border: 1px solid var(--table-border);
  border-radius: 1.8rem 1.8rem 1rem 1rem;
  padding: 1rem;
}
.center-area__box.campaign {
  padding-top: 2rem;
  background-color: var(--center-area-transparent);
}

.right-sidebar {
  grid-column: 21/25;
  z-index: 107;
}
@media only screen and (max-width: 64em) {
  .right-sidebar {
    grid-column: 1/7;
    background-color: var(--card-color);
    border-radius: 1.8rem;
    padding-bottom: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .right-sidebar {
    grid-column: 1/25;
    grid-row: 4;
    margin-top: 2rem;
    position: fixed;
    left: 0;
    right: 0;
    top: 94dvh;
    border-radius: 0;
  }
}
@media only screen and (max-width: 64em) {
  .right-sidebar__box {
    padding: 0 1rem;
    border-radius: 1.8rem;
    overflow: hidden;
    grid-row: 3;
    background-color: var(--card-color);
  }
}
@media only screen and (max-width: 37.5em) {
  .right-sidebar__top {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 1.5rem;
    z-index: 1;
    width: 100%;
  }
  .right-sidebar__top--btn {
    border-radius: 1.6rem;
    background: #8498E1;
    width: 7.5rem;
    height: 0.7rem;
  }
}
.right-sidebar.active {
  z-index: 111;
}
@media only screen and (max-width: 37.5em) {
  .right-sidebar.active {
    grid-column: 1/25;
    grid-row: 4;
    margin-top: 2rem;
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    border-radius: 0;
    border-top-left-radius: 2.2rem;
    border-top-right-radius: 2.2rem;
    padding: 2.3rem 1.8rem;
  }
}
.right-sidebar.active .right-sidebar__top {
  position: relative;
  top: -1rem;
}
.right-sidebar.active .key-details-box {
  padding: 1.4rem 1.6rem 0;
  border-radius: 1.8rem;
}
.right-sidebar.active .right-sidebar__box {
  padding: 0 1rem;
}

.birthday-icon {
  width: 2.4rem;
  height: 2.2rem;
}

.celeberation-icon {
  width: 3rem;
  height: 3rem;
}

.profile-img {
  position: relative;
}
.profile-img__wrapper {
  position: relative;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-img__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-img__name {
  background-color: #8498E1;
  color: #040919;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #040919;
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.profile-img__edit {
  position: absolute;
  width: 100%;
  height: 50%;
  background-color: rgba(8, 19, 55, 0.8980392157);
  bottom: 0;
  right: 0;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
}
.profile-img__editable {
  display: flex;
}
.profile-img__iconletter {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 2rem;
}

.camera-icon {
  width: 1.4rem;
  height: 1.4rem;
  stroke: #FFFFFF;
}

.edit-icon img {
  width: 20px;
  height: 20px;
}

.profile-status-dropdown {
  display: none;
  margin-left: 1.5rem;
}
.profile-status-dropdown__container {
  position: relative;
  display: inline-block;
}
.profile-status-dropdown__container.show .profile-status-dropdown__menu {
  display: block;
}
.profile-status-dropdown__button {
  background-color: #D72F4D;
  color: #FFFFFF;
  border: none;
  border-radius: 1.4rem;
  padding: 2px 10px 2px 2px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.4rem;
}
.profile-status-dropdown__text {
  min-width: 35px;
}
.profile-status-dropdown__icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.6rem;
}
.profile-status-dropdown__arrow {
  display: flex;
  align-items: center;
}
.profile-status-dropdown__arrow svg {
  width: 2rem;
  height: 2rem;
  stroke: #FFFFFF;
}
.profile-status-dropdown__menu {
  display: none;
  position: absolute;
  border-radius: 5px;
  z-index: 1;
  top: 100%;
  left: 0;
  width: 100%;
}
.profile-status-dropdown__menu button {
  color: #FFFFFF;
  padding: 2px;
  text-decoration: none;
  display: block;
  font-size: 1.4rem;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  margin-top: 2px;
  border-style: none;
  width: 100%;
}
.profile-status-dropdown__menu img {
  width: 2.4rem;
  height: auto;
  margin-right: 1.4rem;
}
.profile-status-dropdown__hot {
  background-color: #D72F4D;
}
.profile-status-dropdown__cold {
  background-color: #398CD0;
}
.profile-status-dropdown__warm {
  background-color: #D2862C;
}
.profile-status-dropdown__editable {
  display: flex;
}

.profile-status-dropdown__menu[data-selected-status=hot] .profile-status-dropdown__hot {
  display: none;
}

.profile-status-dropdown__menu[data-selected-status=warm] .profile-status-dropdown__warm {
  display: none;
}

.profile-status-dropdown__menu[data-selected-status=cold] .profile-status-dropdown__cold {
  display: none;
}

.app-menu {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  min-width: 220px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  z-index: 11;
  padding: 20px 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  right: 0;
  top: 35px;
  background-color: #FFFFFF;
  border-radius: 1rem;
}
.app-menu__menus {
  width: 28%;
  border-radius: 1rem;
}
.app-menu__menus img {
  padding: 5px;
  max-width: 100%;
  height: auto;
}
.app-menu__menus:hover {
  background-color: #cdcdcd;
}
.app-menu.show {
  display: flex;
}

.left-box {
  /*    &__tags-area{
          width: 31rem;
      }*/
}
@media only screen and (max-width: 64em) {
  .left-box {
    background-color: var(--card-color);
    padding: 0 2rem;
    border-bottom-left-radius: 1.8rem;
    border-bottom-right-radius: 1.8rem;
    transition: opacity 0.3s ease-in-out;
  }
}
@media only screen and (max-width: 64em) {
  .left-box {
    padding: 0 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .left-box {
    height: 0;
    opacity: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .left-box.show {
    border: 1px solid var(--user-info-border);
    height: auto;
    opacity: 1;
    margin-top: 2rem;
  }
}
.left-box__assignee-owner {
  display: flex;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 64em) {
  .left-box__assignee-owner {
    flex-direction: column;
    gap: 0.3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .left-box__assignee-owner {
    flex-direction: row;
  }
}
.left-box__a-o-container {
  width: 50%;
}
@media only screen and (max-width: 64em) {
  .left-box__a-o-container {
    width: 100%;
  }
}
.left-box__sub-heading {
  color: var(--black-col);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
}
.left-box__assignee-box {
  width: 100%;
}

.custom-select__wrapper {
  position: relative;
  margin: 0.2rem;
}
.custom-select__trigger {
  display: flex;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid transparent;
  cursor: default;
  min-height: 4rem;
}
.custom-select__trigger svg {
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
  margin-left: auto;
  display: none;
}
.custom-select__trigger-editable {
  border-bottom: 1px solid var(--table-tr-border);
  pointer-events: auto;
  cursor: pointer;
}
.custom-select__trigger-editable svg {
  display: block;
}
.custom-select__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24rem;
  overflow-y: scroll;
  display: none;
  z-index: 10;
  border-radius: 1rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  box-shadow: 0px 5px 10px 0px rgba(67, 70, 75, 0.15);
  width: 22rem;
}
.custom-select__options::-webkit-scrollbar {
  width: 0.5rem;
}
.custom-select__options::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(75, 74, 74, 0.3);
  border-radius: 10px;
}
.custom-select__options::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(71, 69, 69, 0.5);
}
.custom-select__options.feedback-options {
  height: 12rem;
}
.custom-select__option {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.custom-select__option:hover {
  background-color: var(--select-hover);
}
.custom-select__option.selected {
  background-color: var(--custom-selected-bg);
}
.custom-select__option.selected .custom-select__user {
  font-weight: 600;
}
.custom-select__user {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 14rem;
}
.custom-select__selected-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
}
.custom-select__selected-user.black-col-text {
  color: var(--black-col);
}
.custom-select__selected-user.width-set {
  width: 9.2rem;
}
.custom-select__user-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #040919;
  margin-right: 0.6rem;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
}
.custom-select__selected-user-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #040919;
  margin-right: 0.6rem;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
}
.custom-select__search-box {
  display: flex;
  padding: 1.2rem 1rem;
}
.custom-select__search-box input {
  border-style: none;
  outline: none;
  background-color: transparent;
  width: 100%;
  color: var(--black-col);
}
.custom-select__border {
  border-bottom: 1px solid var(--custom-input-border);
}

.elipsis-auto {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tags__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.tags__box {
  border-radius: 1.3rem;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
}
.tags__box.showAll {
  display: flex !important;
}
@media only screen and (max-width: 37.5em) {
  .tags__box {
    border: 1px solid var(--border-color);
    background: var(--tags-box-bg);
  }
}
.tags__icon {
  height: 1.2rem;
  width: 1.2rem;
  fill: #555B6C;
  margin-right: 0.6rem;
}
.tags__close {
  width: 0.8rem;
  height: 0.8rem;
  stroke: var(--black-col);
  margin-left: 0.6rem;
  cursor: pointer;
  display: none;
}
.tags__text {
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  word-break: break-word;
}
.tags__add-tag {
  width: 100%;
  color: var(--black-col);
  border-bottom: 1px solid #A5ABC3;
  margin-top: 1rem;
  padding: 0.6rem;
  transform: translateY(-10px);
  display: none;
  transition: transform 0.5s ease-in;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.tags__add-tag input {
  background: transparent;
  border-style: none;
  outline: none;
  width: 100%;
}
.tags__add-tag button {
  background: transparent;
  padding: 0.1rem 1.4rem 0.2rem;
  border: 1px solid gray;
  border-radius: 15px;
  cursor: pointer;
}
.tags__add-tag button:active {
  transform: scale(1.05);
}
.tags__add-tag svg {
  width: 1rem;
  height: 1rem;
  stroke: #040919;
}
.tags__add-tag.showInput {
  transform: translateY(0px);
  display: flex;
}
.tags__add-icon {
  width: 1rem;
  height: 1rem;
  stroke: var(--black-col);
}

.tags__editable .tags__icon {
  display: none;
}
.tags__editable .tags__close {
  display: block;
}
.tags__editable .add-tag-btn {
  display: block;
}

.remaining-tags {
  border-radius: 1.3rem;
  border: 1px solid #A5ABC3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.6rem 1rem;
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  cursor: pointer;
  margin-right: 0.6rem;
  margin-bottom: 0.6rem;
}
@media only screen and (max-width: 37.5em) {
  .remaining-tags {
    border: 1px solid var(--border-color);
    background: var(--tags-box-bg);
  }
}

.add-tag-btn {
  border-radius: 1.3rem;
  border: 1px solid #A5ABC3;
  padding: 0.6rem 1rem;
  color: #040919;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  cursor: pointer;
  display: none;
  margin-right: 0.6rem;
  margin-bottom: 0.6rem;
  position: relative;
}

.sidebar-accordion {
  padding-bottom: 4rem;
}
@media only screen and (max-width: 64em) {
  .sidebar-accordion {
    padding-bottom: 2.4rem;
  }
}
.sidebar-accordion__header {
  transition: background-color 0.3s ease;
}
.sidebar-accordion__header.collapsed .sidebar-accordion__arrow {
  transform: rotate(0deg);
}
.sidebar-accordion__content.collapsed {
  display: none;
}
.sidebar-accordion__arrow {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.custom-datepicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  position: relative;
}
.custom-datepicker__icon {
  width: 1.6em;
  height: 1.6rem;
  stroke: #040919;
  display: none;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
.custom-datepicker__icon.expected-closure__icon {
  stroke: #FFFFFF;
  margin-left: -2rem;
  right: -1rem;
}
.custom-datepicker__editable {
  pointer-events: auto;
}
.custom-datepicker__editable svg {
  display: flex;
}

.custom-textarea {
  display: block;
  border-style: none;
  outline: none;
  box-shadow: none;
  background: inherit;
  width: 100%;
  font-family: "DM Sans", sans-serif;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  height: fit-content;
  border-bottom: 1px solid transparent;
  cursor: default;
  resize: none;
}
.custom-textarea::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 90em) {
  .custom-textarea {
    font-size: 1.4rem;
  }
}

.key-details-box {
  background-color: #2B449D;
  color: #FFFFFF;
  padding: 2rem;
  border-radius: 1.8rem;
  height: 18.5rem;
  width: 100%;
  overflow: hidden;
  position: relative;
}
@media only screen and (max-width: 93.75em) {
  .key-details-box {
    padding: 1.4rem 2rem;
    height: auto;
  }
}
@media only screen and (max-width: 48em) {
  .key-details-box {
    height: auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .key-details-box {
    border-radius: 0;
    padding: 1.4rem 1.6rem 0;
    height: 16.5rem;
    padding-top: 4.8rem;
  }
}
.key-details-box::before {
  content: "";
  display: block;
  position: absolute;
  width: 30rem;
  height: 30rem;
  top: -130px;
  right: -130px;
  background-image: radial-gradient(transparent 0 20px, rgba(255, 255, 255, 0.05) 20px 34px, transparent 34px 52px, rgba(255, 255, 255, 0.04) 52px 62px, transparent 62px 82px, rgba(255, 255, 255, 0.03) 82px 90px, transparent 90px 114px, rgba(255, 255, 255, 0.02) 114px 120px, transparent 120px 140px);
}
.key-details-box__boxes {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 93.75em) {
  .key-details-box__boxes {
    flex-direction: column;
  }
}
@media only screen and (max-width: 48em) {
  .key-details-box__boxes {
    flex-direction: column;
  }
}
@media only screen and (max-width: 37.5em) {
  .key-details-box__boxes {
    flex-direction: row;
  }
}
.key-details-box__container {
  width: 50%;
  padding-right: 1.4rem;
  margin-bottom: 1.6rem;
  position: relative;
}
@media only screen and (max-width: 93.75em) {
  .key-details-box__container {
    width: 80%;
  }
}
@media only screen and (max-width: 90em) {
  .key-details-box__container {
    padding-right: 0.6rem;
  }
}
@media only screen and (max-width: 90em) {
  .key-details-box__container {
    width: 100%;
  }
}
@media only screen and (max-width: 48em) {
  .key-details-box__container {
    width: 100%;
    margin-bottom: 0.8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .key-details-box__container {
    width: 50%;
    margin-bottom: 1.6rem;
  }
}
.key-details-box__head {
  color: #FFFFFF;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.6rem;
}
.key-details-box__label {
  color: #FFFFFF;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  opacity: 0.7;
  margin-bottom: 0.6rem;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .key-details-box__label {
    font-weight: 500;
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .key-details-box__label {
    font-weight: 500;
    font-size: 1rem;
  }
}
@media only screen and (max-width: 48em) {
  .key-details-box__label {
    font-size: 1.3rem;
  }
}
.key-details-box .custom-input {
  color: #FFFFFF;
  position: relative;
  z-index: 2;
}
.key-details-box .custom-input.editable {
  border-bottom: 1px solid #FFFFFF !important;
}
.key-details-box__input-box {
  display: flex;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  border-bottom: 1px solid transparent;
}

.tags-select-dropdown {
  background-color: var(--card-color);
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  border: 1px solid var(--table-border);
  position: absolute;
  top: 4rem;
  z-index: 11;
  height: 24rem;
  padding: 0.2rem;
  overflow-y: scroll;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.tags-select-dropdown::-webkit-scrollbar {
  width: 0.5rem;
}
.tags-select-dropdown::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(75, 74, 74, 0.3);
  border-radius: 10px;
}
.tags-select-dropdown::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(71, 69, 69, 0.5);
}
.tags-select-dropdown ul {
  list-style: none;
}
.tags-select-dropdown li {
  padding: 1rem;
  cursor: pointer;
  border-radius: 0.4rem;
  position: relative;
}
.tags-select-dropdown li:hover {
  background-color: var(--select-hover);
}
.tags-select-dropdown li span {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tags-select-dropdown__item {
  /*        display: flex;
  justify-content: space-between;
  align-items: center;*/
  display: block;
  width: 90%;
}
.tags-select-dropdown__item .check-icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}
.tags-select-dropdown input {
  margin-right: 1rem;
}
.tags-select-dropdown__search-box {
  display: flex;
  padding: 1.2rem 1rem;
}
.tags-select-dropdown__search-box input {
  border-style: none;
  outline: none;
  background-color: transparent;
  width: 100%;
  color: var(--black-col);
}
.tags-select-dropdown__show {
  display: block;
  opacity: 1;
}

.pinned-icon {
  height: 1.8rem;
  width: 1.8rem;
  stroke: #2B449D;
}

.pinned-notes-card {
  background-color: var(--card-color);
  padding: 2rem;
  border-radius: 1.8rem;
  border: 1px solid var(--table-border);
  margin-bottom: 1rem;
}
.pinned-notes-card.campaign {
  margin-top: 2rem;
}
.pinned-notes-card__head {
  display: flex;
  align-items: center;
  margin-bottom: 1.6rem;
}
.pinned-notes-card__head span {
  color: var(--head-primary-color);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-transform: uppercase;
  margin-left: 1rem;
}
.pinned-notes-card__campaign-head {
  margin-left: 0 !important;
}
.pinned-notes-card__notes textarea {
  width: 100%;
  border: none;
  outline: none;
  font-family: "DM Sans", sans-serif;
  color: var(--color-white);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  height: fit-content;
  margin-bottom: 0.6rem;
  background-color: transparent;
}
.pinned-notes-card__notes textarea::-webkit-scrollbar {
  display: none;
}
.pinned-notes-card__notes.edit-mode .pinned-notes-card__item--icon {
  display: block;
}
.pinned-notes-card__notes.edit-mode .pinned-notes-card__item--add {
  display: block;
}
.pinned-notes-card__list {
  padding-left: 2rem;
}
.pinned-notes-card__item {
  font-size: 1.5rem;
  color: var(--black-col);
  font-weight: 400;
  margin-bottom: 1rem;
  position: relative;
  list-style: none;
  display: flex;
}
.pinned-notes-card__item::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  width: 4px;
  height: 4px;
  background: var(--black-col);
  border-radius: 50%;
}
.pinned-notes-card__item--icon {
  stroke: var(--black-col);
  width: 1rem;
  height: 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
  display: none;
}
.pinned-notes-card__item textarea {
  resize: none;
  /*
  &.edit-mode {
      pointer-events: all;
      border-bottom: 1px solid #A5ABC3 !important;
  }*/
}
.pinned-notes-card__item--add {
  background-color: var(--card-color);
  border: 1px solid #A5ABC3;
  padding: 0.3rem 1rem;
  border-radius: 0.4rem;
  display: none;
}
.pinned-notes-card__item--add--icon {
  stroke: var(--black-col);
  width: 1rem;
  height: 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
}
.pinned-notes-card__date-time {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.pinned-notes-card.editable {
  display: none;
}

.edit-mode__save-btn {
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .edit-mode__save-btn--text {
    display: none;
  }
}
.edit-mode__save-btn.edit-mode {
  display: flex;
}
@media only screen and (max-width: 37.5em) {
  .edit-mode__save-btn.edit-mode {
    width: 4rem;
    height: 4rem;
    padding: unset;
    justify-content: center;
    align-items: center;
  }
}
.edit-mode__save-btn.edit-mode .primary-button__icon {
  width: 2rem;
  height: 2rem;
}
.edit-mode__edit-btn {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.edit-mode__edit-btn--cancel {
  display: none;
}
.edit-mode__edit-btn.edit-mode {
  padding: 1.2rem 2.4rem;
  border-radius: 4.8rem;
  width: auto;
  height: auto;
  transition: unset;
}
@media only screen and (max-width: 37.5em) {
  .edit-mode__edit-btn.edit-mode {
    width: 4rem;
    height: 4rem;
    padding: unset;
  }
}
.edit-mode__edit-btn.edit-mode .edit-mode__edit-btn--cancel {
  display: block;
}
@media only screen and (max-width: 37.5em) {
  .edit-mode__edit-btn.edit-mode .edit-mode__edit-btn--cancel {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .edit-mode__edit-btn.edit-mode .edit-button__close-icon {
    display: block;
  }
}
.edit-mode__edit-btn.edit-mode svg {
  display: none;
}
.edit-mode__edit-btn:hover .edit-mode__edit-btn--cancel {
  color: #FFFFFF;
}
.edit-mode__edit-btn:hover .edit-button__close-icon {
  stroke: #FFFFFF;
}
.edit-mode__edit-btn:hover {
  border: 1px solid #2B449D;
}

.table-no-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 20rem;
  margin-bottom: 3.5rem;
}
.table-no-data__skeleton {
  width: 100%;
  height: 1.5rem;
  background-color: #e2e5ed;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.table-no-data__skeleton::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #e2e5ed 0%, #f8f9fd 50%, #e2e5ed 100%);
  animation: no-data 2s linear infinite;
}

@keyframes no-data {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.no-data__head {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  text-align: center;
}
.no-data__desc {
  color: var(--no-data-desc);
  text-align: center;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-top: 0.6rem;
}

.error-missing-screen {
  min-height: calc(100vh - 14.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 1/25;
}
.error-missing-screen .error-missing-screen__head {
  color: var(--black-col);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.64px;
  margin-bottom: 1.6rem;
  text-align: center;
}
@media only screen and (max-width: 37.5em) {
  .error-missing-screen .error-missing-screen__head {
    font-size: 2.4rem;
  }
}
.error-missing-screen .error-missing-screen__desc {
  color: var(--black-col);
  text-align: center;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.17px;
  margin-bottom: 3.2rem;
  width: 65rem;
}
@media only screen and (max-width: 37.5em) {
  .error-missing-screen .error-missing-screen__desc {
    font-size: 1.4rem;
  }
}

.progress-select {
  position: relative;
  display: inline-block;
  background-color: #2B449D;
  border-radius: 2.5rem;
  cursor: pointer;
  margin-top: 1.6rem;
}
.progress-select__dropdown {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11;
}
.progress-select__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
}
.progress-select__trigger span {
  padding: 0.8rem 1.5rem;
  border-right: 1px solid #112673;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.progress-select__arrow {
  padding: 0.6rem;
}
.progress-select__arrow svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke: #FFFFFF;
}
.progress-select__options {
  display: none;
  position: absolute;
  background-color: var(--card-color);
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--details-table-border);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 2px;
}
.progress-select__option {
  cursor: pointer;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  display: block;
  padding: 0.6rem 1rem;
}
.progress-select__option:hover {
  color: #2B449D;
}
.progress-select__option.selected {
  color: #2B449D;
}
.progress-select.active .progress-select__options {
  display: block;
}

.left-side-menu {
  grid-column: 1/5;
  border-right: 1px solid var(--table-border);
  padding-right: 2.4rem;
}
@media only screen and (max-width: 90em) {
  .left-side-menu {
    grid-column: 1/6;
  }
}
@media only screen and (max-width: 62.3125em) {
  .left-side-menu__collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }
  .left-side-menu__collapse.active {
    max-height: 42rem;
  }
}
@media only screen and (max-width: 62.3125em) {
  .left-side-menu {
    grid-column: 1/25;
    border-right: 0;
    padding-right: 0;
  }
}
@media only screen and (max-width: 75em) {
  .left-side-menu {
    padding-right: 1rem;
  }
}
.left-side-menu__head {
  padding: 2rem 0 1.6rem;
}
@media only screen and (max-width: 62.3125em) {
  .left-side-menu__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.left-side-menu__list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
@media only screen and (max-width: 62.3125em) {
  .left-side-menu__list {
    margin-top: 0;
  }
}
.left-side-menu__sub-menu-list {
  margin-top: 0;
  margin-left: 1.5rem;
  display: none;
}
.left-side-menu__item {
  cursor: pointer;
  position: relative;
  transition-duration: 0.25s;
}
.left-side-menu__item:hover {
  background-color: var(--color-hover);
  border-radius: 6px;
}
.left-side-menu__item.active {
  background: #2B449D;
  border-radius: 6px;
}
.left-side-menu__item.active .left-side-menu__text {
  color: #FFFFFF;
}
.left-side-menu__item.active .left-side-menu__icon {
  stroke: #FFFFFF;
}
.left-side-menu__link {
  display: inline-flex;
  text-decoration: none;
  padding: 1.4rem;
}
.left-side-menu__icon {
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
  stroke: var(--black-col);
  transition: stroke 0.3s ease;
}
.left-side-menu__text {
  font-size: 1.5rem;
  color: var(--black-col);
  font-weight: 500;
  white-space: nowrap;
  transition: margin-left 0.45s ease;
}
@media only screen and (max-width: 100em) {
  .left-side-menu__text.report-lg-text {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 62.3125em) {
  .left-side-menu__text.report-lg-text {
    font-size: 1.5rem;
  }
}
.left-side-menu__text:hover {
  margin-left: 5px;
}
.left-side-menu__arrow-icon {
  height: 1.2rem;
  width: 1.2rem;
  fill: var(--black-col);
}
.left-side-menu__submenu {
  padding-bottom: 0;
}
.left-side-menu__submenu:hover {
  background-color: unset;
}
.left-side-menu__toggle-button.kebab_button {
  display: none;
}
@media only screen and (max-width: 62.3125em) {
  .left-side-menu__toggle-button.kebab_button {
    display: flex;
  }
}

.report-statics {
  background-color: var(--table-container);
  border: 1px solid var(--table-border);
  border-radius: 1.8rem;
  padding: 0 2rem;
  margin-bottom: 3.2rem;
  margin: 3.2rem 0;
}
.report-statics__main-report {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
}
.report-statics__graph {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s max-height ease-in-out;
}
.report-statics__graph.active {
  max-height: 37rem;
}
@media only screen and (max-width: 90em) {
  .report-statics__graph.active {
    max-height: 41rem;
  }
}
@media only screen and (max-width: 75em) {
  .report-statics__graph.active {
    max-height: unset;
    height: auto;
  }
}
.report-statics__left {
  display: flex;
  align-items: center;
}
.report-statics__count {
  margin-left: 1rem;
}
@media only screen and (max-width: 48em) {
  .report-statics__count {
    display: none;
  }
}
.report-statics__sub-heading {
  font-weight: 600;
  margin-left: 2.4rem;
}
@media only screen and (max-width: 48em) {
  .report-statics__sub-heading {
    display: none;
  }
}
.report-statics__icon {
  padding: 0.7rem;
  border-radius: 1.6rem;
  border: 1px solid #FFFFFF;
  background: #E5E8F2;
  height: 3.2rem;
  width: 3.2rem;
  margin-right: 1rem;
}
.report-statics__icon svg {
  stroke: #040919;
  height: 1.2rem;
  width: 1.2rem;
  text-align: center;
  display: block;
  margin: auto;
  margin-top: 2px;
}
@media only screen and (max-width: 75em) {
  .report-statics__icon svg {
    margin-top: 1px;
  }
}
.report-statics__heading {
  display: flex;
  align-items: center;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.report-statics__showmore--btn {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--lite-primary);
  cursor: pointer;
}
.report-statics__showmore svg {
  margin-left: auto;
  transition: transform 0.3s ease;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.5rem;
}

/*.tabs {
    display: flex;
    margin-bottom: .8rem;

    &__buttons {
        padding: 1rem 1.6rem;
        cursor: pointer;
        border: none;
        background-color: transparent;
        border-radius: 17px;
        border: 1px solid var(--tab-border);
        color: var(--tab-color);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        margin-right: .8rem;
        transition: all 0.3s;
        white-space: nowrap;

        &:hover {
            background-color: var(--tab-hover);
        }

        &.active-tab {
            background-color: var(--tabs-lg-active);
            border: 1px solid var(--tabs-lg-border);
            color: $color-white;
        }

        @include respond(laptop) {
            font-size: 1.4rem;
        }
    }

    &__sm-buttons {
        font-size: 1.3rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        padding: .8rem 1.2rem;
        cursor: pointer;
        border: none;
        background-color: transparent;
        border-radius: 17px;
        border: 1px solid var(--tab-border);
        color: var(--tab-font);
        margin-right: .8rem;
        transition: all 0.3s;
        white-space: nowrap;

        @include respond(desktop) {
            padding: .8rem 1rem;
            margin-right: .4rem;
            font-size: 1.1rem;
        }

        @include respond(medium-laptop) {
            padding: .8rem .8rem;
        }

        @include respond(tab-land) {
            padding: .8rem 1.4rem;
            margin-right: .6rem;
            font-size: 1.4rem;
        }

        @include respond(phone-land) {
            padding: .8rem .8rem;
            margin-right: .4rem;
            font-size: 1.1rem;
        }

        &:hover {
            background-color: var(--tab-hover);
        }

        &.active-tab {
            background-color: var(--tab-active-bg);
            border: 1px solid var(--tab-active-bg);
            color: var(--white-col);
            pointer-events:none;
        }

        &:last-child {
            margin-right: 0;
        }

    }

    &__notification--buttons {
        font-size: 1.4rem;
    }

    &__content {
        display: none;
        padding: 0 1rem;

        @include respond(laptop) {
            padding: 0;
        }

        &.active {
            display: block;
        }

        &--top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.6rem;
        }

        &--head {
            color: var(--black-col);
            font-size: 2.2rem;
            font-style: normal;
            font-weight: 600;
            line-height: 130%;
            letter-spacing: -0.22px;
        }

        &--btn {
            display: flex;
            align-items: center;
            border-style: none;
            background-color: $color-primary;
            border-radius: 4.8rem;
            padding: 1rem 1.6rem;
            color: $color-white;
            font-size: 1.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 100%;
            cursor: pointer;
            transition: all .3s ease-in-out;

            svg {
                width: 1.6rem;
                height: 1.6rem;
                stroke: $color-white;
                margin-right: .6rem;
            }

            &:hover {
                background-color: $color-primary-dark;
            }
        }

        &--details {
            height: 100%;

            @include respond(phone) {
                height: auto;
            }
        }
    }

    &__notification--content {
        padding: 0;
        position: relative;
    }

    &__button--container {
        overflow-x: auto;
        touch-action: pan-x;
        margin: 0 1rem 2rem;

        &::-webkit-scrollbar {
            height: .7rem;
        }

        &::-webkit-scrollbar-thumb {
            background-color: $color-scroll-thumb;
            border-radius: 2rem;
        }

        &::-webkit-scrollbar-track {
            background-color: $color-scroll-bar;
            border-radius: 2rem;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: $color-scroll-thumb-hover;
        }

        @include respond(laptop) {
            margin: 0 0 1rem;
        }
    }

    &__button-hp-container {
        overflow-x: auto;
        touch-action: pan-x;
        margin: unset;

        &::-webkit-scrollbar {
            height: 2px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: $color-scroll-thumb;
            border-radius: 1rem;
        }

        &::-webkit-scrollbar-track {
            background-color: $color-scroll-bar;
            border-radius: 1rem;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: $color-scroll-thumb-hover;
        }

        @include respond(laptop) {
            margin: 0 0 1rem;
        }
    }

    &__notification--container {
        margin: 0 0 2rem;

        .tabs__buttons {
            padding: .8rem 1.4rem;
            cursor: pointer;
            border: none;
            background-color: transparent;
            border-radius: 1.7rem;
            border: 1px solid var(--tab-border);
            color: var(--black-col);
            font-size: 1.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 100%;
            margin-right: .8rem;
            transition: all 0.3s;
            white-space: nowrap;

            &:hover {
                background-color: var(--tab-hover);
            }

            &.active-tab {
                background-color: var(--modal-tabs-bg);
                border: 1px solid var(--tabs-lg-active);
                color: var(--white-col);
            }

            @include respond(laptop) {
                font-size: 1.4rem;
            }
        }
    }

    &__modal--container {
        margin: 0 0 2rem;

        .tabs__buttons {
            border: 1px solid var(--tab-border);
            color: var(--black-col);

            &:hover {
                background-color: var(--tab-hover);
            }

            &.active-tab {
                background-color: var(--modal-tabs-bg);
                border: 1px solid var(--tabs-lg-active);
                color: var(--white-col);
            }

            @include respond(laptop) {
                font-size: 1.4rem;
            }
        }
    }
}
*/
.tabs {
  display: flex;
  margin-bottom: 0.8rem;
}
.tabs__buttons {
  padding: 1rem 1.6rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 17px;
  border: 1px solid var(--tab-border);
  color: var(--tab-color);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
}
.tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__buttons.active-tab {
  background-color: var(--tabs-lg-active);
  border: 1px solid var(--tabs-lg-border);
  color: #FFFFFF;
}
@media only screen and (max-width: 90em) {
  .tabs__buttons {
    font-size: 1.4rem;
  }
}
.tabs__sm-buttons {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 17px;
  border: 1px solid var(--tab-border);
  color: var(--tab-font);
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
}
@media only screen and (max-width: 106.25em) {
  .tabs__sm-buttons {
    padding: 0.8rem 1rem;
    margin-right: 0.4rem;
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .tabs__sm-buttons {
    padding: 0.8rem 0.8rem;
  }
}
@media only screen and (max-width: 75em) {
  .tabs__sm-buttons {
    padding: 0.8rem 1.4rem;
    margin-right: 0.6rem;
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 48em) {
  .tabs__sm-buttons {
    padding: 0.8rem 0.8rem;
    margin-right: 0.4rem;
    font-size: 1.1rem;
  }
}
.tabs__sm-buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__sm-buttons.active-tab {
  background-color: var(--tab-active-bg);
  border: 1px solid var(--tab-active-bg);
  color: var(--white-col);
}
.tabs__sm-buttons:last-child {
  margin-right: 0;
}
.tabs__notification--buttons {
  font-size: 1.4rem;
}
.tabs__content {
  display: none;
  padding: 0 1rem;
}
@media only screen and (max-width: 90em) {
  .tabs__content {
    padding: 0;
  }
}
.tabs__content.active {
  display: block;
}
.tabs__content--top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.tabs__content--head {
  color: var(--black-col);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.22px;
}
.tabs__content--btn {
  display: flex;
  align-items: center;
  border-style: none;
  background-color: #2B449D;
  border-radius: 4.8rem;
  padding: 1rem 1.6rem;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.tabs__content--btn svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #FFFFFF;
  margin-right: 0.6rem;
}
.tabs__content--btn:hover {
  background-color: #112673;
}
.tabs__content--details {
  height: 100%;
}
@media only screen and (max-width: 37.5em) {
  .tabs__content--details {
    height: auto;
  }
}
.tabs__notification--content {
  padding: 0;
}
.tabs__button--container {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}
.tabs__button--container::-webkit-scrollbar {
  height: 0.7rem;
}
.tabs__button--container::-webkit-scrollbar-thumb {
  background-color: #949494;
  border-radius: 2rem;
}
.tabs__button--container::-webkit-scrollbar-track {
  background-color: #D9D9D9;
  border-radius: 2rem;
}
.tabs__button--container::-webkit-scrollbar-thumb:hover {
  background-color: #878585;
}
@media only screen and (max-width: 90em) {
  .tabs__button--container {
    margin: 0 0 1rem;
  }
}
.tabs__button-hp-container {
  overflow-x: auto;
  touch-action: pan-x;
  margin: unset;
}
.tabs__button-hp-container::-webkit-scrollbar {
  height: 2px;
}
.tabs__button-hp-container::-webkit-scrollbar-thumb {
  background-color: #949494;
  border-radius: 1rem;
}
.tabs__button-hp-container::-webkit-scrollbar-track {
  background-color: #D9D9D9;
  border-radius: 1rem;
}
.tabs__button-hp-container::-webkit-scrollbar-thumb:hover {
  background-color: #878585;
}
@media only screen and (max-width: 90em) {
  .tabs__button-hp-container {
    margin: 0 0 1rem;
  }
}
.tabs__notification--container {
  margin: 0 0 2rem;
}
.tabs__notification--container .tabs__buttons {
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 1.7rem;
  border: 1px solid var(--tab-border);
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
}
.tabs__notification--container .tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__notification--container .tabs__buttons.active-tab {
  background-color: var(--modal-tabs-bg);
  border: 1px solid var(--tabs-lg-active);
  color: var(--white-col);
}
@media only screen and (max-width: 90em) {
  .tabs__notification--container .tabs__buttons {
    font-size: 1.4rem;
  }
}
.tabs__modal--container {
  margin: 0 0 2rem;
}
.tabs__modal--container .tabs__buttons {
  border: 1px solid var(--tab-border);
  color: var(--black-col);
}
.tabs__modal--container .tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__modal--container .tabs__buttons.active-tab {
  background-color: var(--modal-tabs-bg);
  border: 1px solid var(--tabs-lg-active);
  color: var(--white-col);
}
@media only screen and (max-width: 90em) {
  .tabs__modal--container .tabs__buttons {
    font-size: 1.4rem;
  }
}
.tabs__more {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 0.8rem;
}
.tabs__more.open .tabs__dropdown {
  display: block;
  width: 100%;
  text-align: left;
}
.tabs__more--btn {
  padding: 1rem 1.6rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 17px;
  border: 1px solid var(--tab-border);
  color: var(--tab-color);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.tabs__more--btn--icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  margin-left: 0.4rem;
}
.tabs__more--btn .more-count {
  padding-left: 0.5rem;
  color: #2B449D;
}
.tabs__more--btn:hover {
  background-color: var(--tab-hover);
}
.tabs__dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 110%;
  background: var(--card-color);
  border: 1px solid var(--tab-border);
  min-width: 160px;
  z-index: 100;
  border-radius: 2rem;
  overflow: hidden;
}
.tabs__dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
}
.tabs__dropdown .tabs__buttons {
  border-style: none;
  background-color: transparent;
  border-bottom: 1px solid var(--tab-border);
  border-radius: unset;
}
.tabs__dropdown .tabs__buttons:last-child {
  border-bottom: unset;
}
.tabs__dropdown .tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__dropdown .tabs__buttons.active-tab {
  color: var(--primary-col);
}

.report-aging-accordian {
  height: 150px;
  width: 35%;
}
.report-aging-accordian.stage-cycle {
  height: 150px;
  width: 37%;
  margin-right: 100px;
}
@media only screen and (max-width: 75em) {
  .report-aging-accordian.stage-cycle {
    width: 100%;
    margin-right: unset;
  }
}
@media only screen and (max-width: 75em) {
  .report-aging-accordian {
    width: 100%;
  }
}

#leaddistributionchart .apexcharts-legend.apexcharts-align-center.apx-legend-position-right {
  right: 12rem !important;
}
@media only screen and (max-width: 90em) {
  #leaddistributionchart .apexcharts-legend.apexcharts-align-center.apx-legend-position-right {
    right: 0 !important;
  }
}
@media only screen and (max-width: 75em) {
  #leaddistributionchart .apexcharts-legend.apexcharts-align-center.apx-legend-position-right {
    right: 18rem !important;
  }
}
@media only screen and (max-width: 48em) {
  #leaddistributionchart .apexcharts-legend.apexcharts-align-center.apx-legend-position-right {
    right: 0 !important;
  }
}

#leaddistributionchart .apexcharts-legend-marker {
  display: none !important;
}

.apexcharts-text {
  fill: var(--apex-data-color) !important;
}

hp-ageing-report-quotation#hp-ageing-report .apexcharts-legend-text {
  margin-bottom: 0.6rem;
  font-size: 1.5rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--black-col) !important;
}

#hp-ageing-report-quotation .apexcharts-legend-text {
  margin-bottom: 0.6rem;
  font-size: 1.5rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--black-col) !important;
}

#hp-oppurtunities-pie-chart-winloss .apexcharts-legend-text {
  margin-bottom: 1.2rem;
  font-size: 1.5rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--black-col) !important;
}

.kebab_button {
  background-color: transparent;
  border-style: none;
  padding: unset;
  border: 1px solid #A5ABC3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  cursor: pointer;
}
.kebab_button svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
@media only screen and (max-width: 64em) {
  .kebab_button .mobile {
    display: block;
  }
}

.white-box {
  background-color: var(--table-container);
  border: 1px solid var(--table-border);
  width: 50%;
  border-radius: 1.8rem;
  display: flex;
}
@media only screen and (max-width: 75em) {
  .white-box {
    width: 100%;
    height: auto;
    margin-bottom: 1.6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .white-box {
    margin-bottom: 0;
  }
}
.white-box.report {
  width: 35%;
  height: 15.5rem;
}
@media only screen and (max-width: 106.25em) {
  .white-box.report {
    width: 50%;
  }
}
@media only screen and (max-width: 90em) {
  .white-box.report {
    width: 50%;
  }
}
@media only screen and (max-width: 75em) {
  .white-box.report {
    width: 100%;
    height: auto;
  }
}
.white-box.stage-cycle {
  margin-top: 3rem;
  margin-left: 5rem;
}
@media only screen and (max-width: 75em) {
  .white-box.stage-cycle {
    margin-top: unset;
    margin-left: unset;
  }
}
@media only screen and (max-width: 62.3125em) {
  .white-box {
    width: 100%;
  }
}
@media only screen and (max-width: 75em) {
  .white-box {
    width: 100%;
    display: block;
  }
}
.white-box__left {
  width: 72%;
  border-right: 1px solid #e5e8f2;
}
.white-box__left.report-aging {
  border-bottom: 0;
  width: 100%;
  border-right: 0;
}
@media only screen and (max-width: 75em) {
  .white-box__left {
    width: 100%;
    border-bottom: 1px solid #e5e8f2;
    border-right: 0;
  }
}
@media only screen and (max-width: 90em) {
  .white-box__linegraph .chart {
    margin-top: -22px;
  }
}
@media only screen and (max-width: 90em) {
  .white-box__linegraph {
    display: flex;
    justify-content: flex-end;
  }
}
@media only screen and (max-width: 37.5em) {
  .white-box__linegraph {
    justify-content: flex-start;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 64em) {
  .white-box__chart {
    margin-top: -22px;
  }
}
.white-box__inner {
  padding: 2rem;
  padding-right: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 0;
}
@media only screen and (max-width: 90em) {
  .white-box__inner {
    flex-direction: column;
    padding-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 75em) {
  .white-box__inner {
    padding-bottom: 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .white-box__inner {
    padding-bottom: 0;
  }
}
.white-box__datas {
  width: 55%;
}
@media only screen and (max-width: 90em) {
  .white-box__datas {
    order: 2;
    position: absolute;
    top: 24px;
  }
}
@media only screen and (max-width: 85.37em) {
  .white-box__datas {
    width: 65%;
  }
}
@media only screen and (max-width: 37.5em) {
  .white-box__datas {
    order: unset;
    position: unset;
    top: unset;
    width: 85%;
  }
}
.white-box__button {
  display: flex;
  align-items: center;
  background-color: #D9F4E7;
  border-radius: 4rem;
  padding: 0.4rem 0.2rem;
  width: 100%;
  border: none;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  justify-content: center;
}
@media only screen and (max-width: 90em) {
  .white-box__button {
    font-size: 1.1rem;
    margin: 7px 0 0;
  }
}
.white-box__button.lead-aging-button {
  background-color: #F7E4E9;
}
.white-box__icon {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.5rem;
  stroke: #040919;
}
.white-box__icon.button-color {
  stroke: #127343;
}
.white-box__percentage {
  color: #127343;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
@media only screen and (max-width: 90em) {
  .white-box__percentage {
    font-size: 1.3rem;
  }
}
.white-box__percentage.avarage-lead {
  color: #D72F4D;
}
.white-box__heading {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--black-col);
  padding-bottom: 2rem;
}
.white-box__count {
  font-size: 3.2rem;
  color: var(--black-col);
  font-weight: 700;
  line-height: 130%;
  padding-bottom: 5px;
}
@media only screen and (max-width: 75em) {
  .white-box__count {
    padding-bottom: 2.5rem;
  }
}
.white-box__right {
  width: 30%;
  padding: 2rem;
}
@media only screen and (max-width: 75em) {
  .white-box__right {
    display: flex;
    width: 100%;
  }
}
.white-box__day-count {
  display: flex;
  align-items: flex-start;
}
.white-box__day-count:first-child {
  margin-bottom: 2rem;
}
@media only screen and (max-width: 75em) {
  .white-box__day-count:first-child:first-child {
    padding-right: 2rem;
  }
}
.white-box__content-heading {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 130%;
  color: var(--black-col);
}
.white-box__calender-icon {
  stroke: var(--black-col);
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
  margin-top: 3px;
}
.white-box__content-para {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  color: var(--black-col);
  line-height: 130%;
  margin-top: 0.4rem;
}

.blue-box {
  width: 50%;
  background-color: var(--primary-col);
  border-radius: 1.8rem;
  display: flex;
  margin-right: 1.6rem;
}
@media only screen and (max-width: 75em) {
  .blue-box {
    width: 100%;
    margin-bottom: 1.6rem;
  }
}
@media only screen and (max-width: 75em) {
  .blue-box {
    width: 100%;
    display: block;
    margin-bottom: 1.6rem;
  }
}
.blue-box__left {
  width: 70%;
  border-right: 1px solid #112673;
}
@media only screen and (max-width: 75em) {
  .blue-box__left {
    width: 100%;
    border-bottom: 1px solid #112673;
    border-right: 0;
  }
}
@media only screen and (max-width: 90em) {
  .blue-box__linegraph {
    display: flex;
    justify-content: flex-end;
  }
  .blue-box__linegraph .chart {
    margin-top: -22px;
  }
}
@media only screen and (max-width: 37.5em) {
  .blue-box__linegraph {
    justify-content: flex-start;
    margin-top: 20px;
  }
}
.blue-box__inner {
  padding: 2rem;
  padding-right: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 0;
}
@media only screen and (max-width: 90em) {
  .blue-box__inner {
    flex-direction: column;
    padding-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 75em) {
  .blue-box__inner {
    padding-bottom: 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .blue-box__inner {
    padding-bottom: 0;
  }
}
.blue-box__datas {
  width: 55%;
}
@media only screen and (max-width: 90em) {
  .blue-box__datas {
    order: 2;
    position: absolute;
    top: 29px;
  }
}
@media only screen and (max-width: 85.37em) {
  .blue-box__datas {
    width: 65%;
  }
}
@media only screen and (max-width: 37.5em) {
  .blue-box__datas {
    order: unset;
    position: unset;
    top: unset;
    width: 85%;
  }
}
.blue-box__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #D9F4E7;
  border-radius: 4rem;
  padding: 0.4rem 0.2rem;
  width: 100%;
  border: none;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  box-sizing: border-box;
}
@media only screen and (max-width: 90em) {
  .blue-box__button {
    font-size: 1.1rem;
    margin: 7px 0 0;
  }
}
.blue-box__button.conversion-button {
  padding: 0.2rem 1rem;
  font-size: 1.2rem;
}
.blue-box__icon {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.5rem;
  stroke: #040919;
}
.blue-box__percentage {
  color: #127343;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
@media only screen and (max-width: 90em) {
  .blue-box__percentage {
    font-size: 1.3rem;
  }
}
.blue-box__count {
  font-size: 3.2rem;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 130%;
  padding-bottom: 5px;
}
@media only screen and (max-width: 90em) {
  .blue-box__count {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 75em) {
  .blue-box__count {
    padding-bottom: 2.5rem;
  }
}
.blue-box__count-inner {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 130%;
}
.blue-box__heading {
  font-size: 1.3rem;
  font-weight: 600;
  color: #FFFFFF;
  padding-bottom: 2rem;
}
.blue-box__right {
  width: 30%;
  padding: 2rem;
}
@media only screen and (max-width: 75em) {
  .blue-box__right {
    display: flex;
    width: 100%;
  }
}
.blue-box__day-count {
  display: flex;
  align-items: flex-start;
}
.blue-box__day-count:first-child {
  margin-bottom: 2rem;
}
@media only screen and (max-width: 75em) {
  .blue-box__day-count:first-child:first-child {
    padding-right: 2rem;
  }
}
.blue-box__calender-icon {
  stroke: #FFFFFF;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
  margin-top: 3px;
}
.blue-box__content-heading {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 130%;
  color: #FFFFFF;
}
.blue-box__content-para {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  line-height: 130%;
  margin-top: 0.4rem;
}
.blue-box__home {
  width: 100%;
  margin-right: 0;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .blue-box__home .blue-box__button {
    margin-top: 1.8rem;
  }
  .blue-box__home .blue-box__count {
    padding-bottom: 0.6rem;
  }
}
.blue-box__home--left {
  width: 100%;
  border-style: none;
}
.blue-box__home--inner {
  padding: 1.6rem 2rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .blue-box__home--inner {
    flex-direction: row;
    padding: 1rem 1rem;
  }
}
.blue-box__home--heading {
  padding-bottom: 1rem;
}
.blue-box__home--datas {
  width: auto;
}
@media only screen and (max-width: 90em) {
  .blue-box__home--datas {
    position: relative;
    top: unset;
    order: unset;
  }
}
.blue-box__home--linegraph {
  display: block;
}
.blue-box__home--linegraph .chart {
  margin-top: -22px;
}
@media only screen and (max-width: 90em) {
  .blue-box__home--linegraph {
    position: absolute;
    right: 1rem;
    top: 1rem;
  }
}
.blue-box__view-report {
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
  z-index: 11;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .blue-box__view-report {
    font-weight: 500;
  }
}
.blue-box__text-span {
  white-space: nowrap;
}

@media only screen and (max-width: 75em) {
  .total-conversion {
    justify-content: center;
  }
}

.progress-card {
  display: flex;
}
@media only screen and (max-width: 75em) {
  .progress-card {
    height: 114px;
    margin-bottom: 1.6rem;
  }
}
@media only screen and (max-width: 48em) {
  .progress-card {
    display: block;
    height: unset;
  }
}
.progress-card__days_left {
  padding: 1.6rem;
  background-color: var(--card-two-color);
  border-radius: 8px;
  border: 1px solid rgba(37, 74, 170, 0.1019607843);
  width: 20%;
  margin-right: 1.6rem;
  margin-bottom: 3.2rem;
  overflow: hidden;
}
@media only screen and (max-width: 75em) {
  .progress-card__days_left {
    width: 30%;
    margin-bottom: 1.6rem;
    height: 100%;
  }
}
@media only screen and (max-width: 48em) {
  .progress-card__days_left {
    width: 100%;
    margin-bottom: 1.6rem;
  }
}
.progress-card__heading {
  color: var(--black-col);
  font-weight: 600;
  font-size: 2.6rem;
  margin-left: -4rem;
  margin-top: -0.2rem;
}
@media only screen and (max-width: 64em) {
  .progress-card__heading {
    display: flex;
    align-items: center;
    margin-top: -1rem;
  }
}
.progress-card__label {
  color: var(--head-primary-color);
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.progress-card__stats-list {
  padding: 1.6rem;
  background-color: var(--card-two-color);
  border-radius: 8px;
  border: 1px solid rgba(37, 74, 170, 0.1019607843);
  width: 80%;
  margin-bottom: 3.2rem;
}
@media only screen and (max-width: 75em) {
  .progress-card__stats-list {
    width: 70%;
    height: 100%;
  }
}
@media only screen and (max-width: 48em) {
  .progress-card__stats-list {
    width: 100%;
    margin-bottom: 1.6rem;
  }
}
.progress-card__list {
  display: flex;
}
@media only screen and (max-width: 75em) {
  .progress-card__list {
    margin-bottom: 1.6rem;
  }
}
.progress-card__list-main {
  justify-content: space-between;
  display: flex;
}
@media only screen and (max-width: 48em) {
  .progress-card__list-main {
    display: block;
  }
}
.progress-card__icon {
  width: 2rem;
  height: 2rem;
  stroke: #040919;
}
.progress-card__icon-main {
  border-radius: 50%;
  background-color: #A0CC16;
  width: 3.2rem;
  height: 3.2rem;
  justify-content: center;
  margin-right: 1rem;
  display: flex;
}
@media only screen and (max-width: 75em) {
  .progress-card__icon-main {
    display: none;
  }
}
@media only screen and (max-width: 48em) {
  .progress-card__icon-main {
    display: flex;
  }
}
.progress-card__title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #555B6C;
  margin-bottom: 1rem;
}
.progress-card__value {
  color: var(--black-col);
  font-size: 1.9rem;
  font-weight: 700;
}
.progress-card__chart {
  margin-left: -2.7rem;
  margin-top: -1rem;
}
.progress-card__content {
  display: flex;
  margin-top: 2rem;
}
.progress-card .apexcharts-legend-series {
  display: none;
}

.report-piechart {
  display: flex;
  padding: 30px 0;
}
.report-piechart.stage-cycle {
  padding-top: 0;
}
@media only screen and (max-width: 75em) {
  .report-piechart {
    display: block;
  }
}
.report-piechart__left {
  width: 50%;
  position: relative;
}
@media only screen and (max-width: 75em) {
  .report-piechart__left {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.report-piechart__date-range {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  color: #555B6C;
  border-top: 1px solid #E5E8F2;
  width: 93%;
  margin: auto;
}

/*.tabs {
    display: flex;
    margin-bottom: .8rem;

    &__buttons {
        padding: 1rem 1.6rem;
        cursor: pointer;
        border: none;
        background-color: transparent;
        border-radius: 17px;
        border: 1px solid var(--tab-border);
        color: var(--tab-color);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        margin-right: .8rem;
        transition: all 0.3s;
        white-space: nowrap;

        &:hover {
            background-color: var(--tab-hover);
        }

        &.active-tab {
            background-color: var(--tabs-lg-active);
            border: 1px solid var(--tabs-lg-border);
            color: $color-white;
        }

        @include respond(laptop) {
            font-size: 1.4rem;
        }
    }

    &__sm-buttons {
        font-size: 1.3rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        padding: .8rem 1.2rem;
        cursor: pointer;
        border: none;
        background-color: transparent;
        border-radius: 17px;
        border: 1px solid var(--tab-border);
        color: var(--tab-font);
        margin-right: .8rem;
        transition: all 0.3s;
        white-space: nowrap;

        @include respond(desktop) {
            padding: .8rem 1rem;
            margin-right: .4rem;
            font-size: 1.1rem;
        }

        @include respond(medium-laptop) {
            padding: .8rem .8rem;
        }

        @include respond(tab-land) {
            padding: .8rem 1.4rem;
            margin-right: .6rem;
            font-size: 1.4rem;
        }

        @include respond(phone-land) {
            padding: .8rem .8rem;
            margin-right: .4rem;
            font-size: 1.1rem;
        }

        &:hover {
            background-color: var(--tab-hover);
        }

        &.active-tab {
            background-color: var(--tab-active-bg);
            border: 1px solid var(--tab-active-bg);
            color: var(--white-col);
            pointer-events:none;
        }

        &:last-child {
            margin-right: 0;
        }

    }

    &__notification--buttons {
        font-size: 1.4rem;
    }

    &__content {
        display: none;
        padding: 0 1rem;

        @include respond(laptop) {
            padding: 0;
        }

        &.active {
            display: block;
        }

        &--top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.6rem;
        }

        &--head {
            color: var(--black-col);
            font-size: 2.2rem;
            font-style: normal;
            font-weight: 600;
            line-height: 130%;
            letter-spacing: -0.22px;
        }

        &--btn {
            display: flex;
            align-items: center;
            border-style: none;
            background-color: $color-primary;
            border-radius: 4.8rem;
            padding: 1rem 1.6rem;
            color: $color-white;
            font-size: 1.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 100%;
            cursor: pointer;
            transition: all .3s ease-in-out;

            svg {
                width: 1.6rem;
                height: 1.6rem;
                stroke: $color-white;
                margin-right: .6rem;
            }

            &:hover {
                background-color: $color-primary-dark;
            }
        }

        &--details {
            height: 100%;

            @include respond(phone) {
                height: auto;
            }
        }
    }

    &__notification--content {
        padding: 0;
        position: relative;
    }

    &__button--container {
        overflow-x: auto;
        touch-action: pan-x;
        margin: 0 1rem 2rem;

        &::-webkit-scrollbar {
            height: .7rem;
        }

        &::-webkit-scrollbar-thumb {
            background-color: $color-scroll-thumb;
            border-radius: 2rem;
        }

        &::-webkit-scrollbar-track {
            background-color: $color-scroll-bar;
            border-radius: 2rem;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: $color-scroll-thumb-hover;
        }

        @include respond(laptop) {
            margin: 0 0 1rem;
        }
    }

    &__button-hp-container {
        overflow-x: auto;
        touch-action: pan-x;
        margin: unset;

        &::-webkit-scrollbar {
            height: 2px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: $color-scroll-thumb;
            border-radius: 1rem;
        }

        &::-webkit-scrollbar-track {
            background-color: $color-scroll-bar;
            border-radius: 1rem;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: $color-scroll-thumb-hover;
        }

        @include respond(laptop) {
            margin: 0 0 1rem;
        }
    }

    &__notification--container {
        margin: 0 0 2rem;

        .tabs__buttons {
            padding: .8rem 1.4rem;
            cursor: pointer;
            border: none;
            background-color: transparent;
            border-radius: 1.7rem;
            border: 1px solid var(--tab-border);
            color: var(--black-col);
            font-size: 1.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 100%;
            margin-right: .8rem;
            transition: all 0.3s;
            white-space: nowrap;

            &:hover {
                background-color: var(--tab-hover);
            }

            &.active-tab {
                background-color: var(--modal-tabs-bg);
                border: 1px solid var(--tabs-lg-active);
                color: var(--white-col);
            }

            @include respond(laptop) {
                font-size: 1.4rem;
            }
        }
    }

    &__modal--container {
        margin: 0 0 2rem;

        .tabs__buttons {
            border: 1px solid var(--tab-border);
            color: var(--black-col);

            &:hover {
                background-color: var(--tab-hover);
            }

            &.active-tab {
                background-color: var(--modal-tabs-bg);
                border: 1px solid var(--tabs-lg-active);
                color: var(--white-col);
            }

            @include respond(laptop) {
                font-size: 1.4rem;
            }
        }
    }
}
*/
.tabs {
  display: flex;
  margin-bottom: 0.8rem;
}
.tabs__buttons {
  padding: 1rem 1.6rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 17px;
  border: 1px solid var(--tab-border);
  color: var(--tab-color);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
}
.tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__buttons.active-tab {
  background-color: var(--tabs-lg-active);
  border: 1px solid var(--tabs-lg-border);
  color: #FFFFFF;
}
@media only screen and (max-width: 90em) {
  .tabs__buttons {
    font-size: 1.4rem;
  }
}
.tabs__sm-buttons {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 17px;
  border: 1px solid var(--tab-border);
  color: var(--tab-font);
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
}
@media only screen and (max-width: 106.25em) {
  .tabs__sm-buttons {
    padding: 0.8rem 1rem;
    margin-right: 0.4rem;
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .tabs__sm-buttons {
    padding: 0.8rem 0.8rem;
  }
}
@media only screen and (max-width: 75em) {
  .tabs__sm-buttons {
    padding: 0.8rem 1.4rem;
    margin-right: 0.6rem;
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 48em) {
  .tabs__sm-buttons {
    padding: 0.8rem 0.8rem;
    margin-right: 0.4rem;
    font-size: 1.1rem;
  }
}
.tabs__sm-buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__sm-buttons.active-tab {
  background-color: var(--tab-active-bg);
  border: 1px solid var(--tab-active-bg);
  color: var(--white-col);
}
.tabs__sm-buttons:last-child {
  margin-right: 0;
}
.tabs__notification--buttons {
  font-size: 1.4rem;
}
.tabs__content {
  display: none;
  padding: 0 1rem;
}
@media only screen and (max-width: 90em) {
  .tabs__content {
    padding: 0;
  }
}
.tabs__content.active {
  display: block;
}
.tabs__content--top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.tabs__content--head {
  color: var(--black-col);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.22px;
}
.tabs__content--btn {
  display: flex;
  align-items: center;
  border-style: none;
  background-color: #2B449D;
  border-radius: 4.8rem;
  padding: 1rem 1.6rem;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.tabs__content--btn svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #FFFFFF;
  margin-right: 0.6rem;
}
.tabs__content--btn:hover {
  background-color: #112673;
}
.tabs__content--details {
  height: 100%;
}
@media only screen and (max-width: 37.5em) {
  .tabs__content--details {
    height: auto;
  }
}
.tabs__notification--content {
  padding: 0;
}
.tabs__button--container {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}
.tabs__button--container::-webkit-scrollbar {
  height: 0.7rem;
}
.tabs__button--container::-webkit-scrollbar-thumb {
  background-color: #949494;
  border-radius: 2rem;
}
.tabs__button--container::-webkit-scrollbar-track {
  background-color: #D9D9D9;
  border-radius: 2rem;
}
.tabs__button--container::-webkit-scrollbar-thumb:hover {
  background-color: #878585;
}
@media only screen and (max-width: 90em) {
  .tabs__button--container {
    margin: 0 0 1rem;
  }
}
.tabs__button-hp-container {
  overflow-x: auto;
  touch-action: pan-x;
  margin: unset;
}
.tabs__button-hp-container::-webkit-scrollbar {
  height: 2px;
}
.tabs__button-hp-container::-webkit-scrollbar-thumb {
  background-color: #949494;
  border-radius: 1rem;
}
.tabs__button-hp-container::-webkit-scrollbar-track {
  background-color: #D9D9D9;
  border-radius: 1rem;
}
.tabs__button-hp-container::-webkit-scrollbar-thumb:hover {
  background-color: #878585;
}
@media only screen and (max-width: 90em) {
  .tabs__button-hp-container {
    margin: 0 0 1rem;
  }
}
.tabs__notification--container {
  margin: 0 0 2rem;
}
.tabs__notification--container .tabs__buttons {
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 1.7rem;
  border: 1px solid var(--tab-border);
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
}
.tabs__notification--container .tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__notification--container .tabs__buttons.active-tab {
  background-color: var(--modal-tabs-bg);
  border: 1px solid var(--tabs-lg-active);
  color: var(--white-col);
}
@media only screen and (max-width: 90em) {
  .tabs__notification--container .tabs__buttons {
    font-size: 1.4rem;
  }
}
.tabs__modal--container {
  margin: 0 0 2rem;
}
.tabs__modal--container .tabs__buttons {
  border: 1px solid var(--tab-border);
  color: var(--black-col);
}
.tabs__modal--container .tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__modal--container .tabs__buttons.active-tab {
  background-color: var(--modal-tabs-bg);
  border: 1px solid var(--tabs-lg-active);
  color: var(--white-col);
}
@media only screen and (max-width: 90em) {
  .tabs__modal--container .tabs__buttons {
    font-size: 1.4rem;
  }
}
.tabs__more {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 0.8rem;
}
.tabs__more.open .tabs__dropdown {
  display: block;
  width: 100%;
  text-align: left;
}
.tabs__more--btn {
  padding: 1rem 1.6rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 17px;
  border: 1px solid var(--tab-border);
  color: var(--tab-color);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  transition: all 0.3s;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.tabs__more--btn--icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  margin-left: 0.4rem;
}
.tabs__more--btn .more-count {
  padding-left: 0.5rem;
  color: #2B449D;
}
.tabs__more--btn:hover {
  background-color: var(--tab-hover);
}
.tabs__dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 110%;
  background: var(--card-color);
  border: 1px solid var(--tab-border);
  min-width: 160px;
  z-index: 100;
  border-radius: 2rem;
  overflow: hidden;
}
.tabs__dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
}
.tabs__dropdown .tabs__buttons {
  border-style: none;
  background-color: transparent;
  border-bottom: 1px solid var(--tab-border);
  border-radius: unset;
}
.tabs__dropdown .tabs__buttons:last-child {
  border-bottom: unset;
}
.tabs__dropdown .tabs__buttons:hover {
  background-color: var(--tab-hover);
}
.tabs__dropdown .tabs__buttons.active-tab {
  color: var(--primary-col);
}

.total-conversion {
  display: flex;
}
@media only screen and (max-width: 48em) {
  .total-conversion {
    display: block;
  }
}
.total-conversion__legend {
  margin-top: 2.4rem;
}
.total-conversion__legend.sales-legend {
  /*display: flex;*/
  flex-wrap: wrap;
}
@media only screen and (max-width: 48em) {
  .total-conversion__legend {
    display: flex;
    flex-wrap: wrap;
  }
}
.total-conversion__item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}
.total-conversion__item.sales-item {
  width: 50%;
  margin-bottom: 1.3rem;
}
@media only screen and (max-width: 48em) {
  .total-conversion__item {
    width: 50%;
    margin-bottom: 2rem;
  }
}
.total-conversion__circle {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 0.8rem;
  margin-top: 0.6rem;
}
.total-conversion__circle--leads {
  background-color: #CFD8F9;
}
.total-conversion__circle--opportunity {
  background-color: #8498E1;
}
.total-conversion__circle--quotations {
  background-color: #4B64BF;
}
.total-conversion__circle--deals-won {
  background-color: #2B449D;
}
.total-conversion__label {
  font-size: 1.5rem;
  color: var(--black-col);
  font-weight: 500;
}
.total-conversion__percentage {
  font-size: 1.3rem;
  font-weight: bold;
  color: #127343;
}
.total-conversion__percentage--negative-value {
  color: #D72F4D;
  font-size: 1.3rem;
  font-weight: bold;
}
.total-conversion__arrow--positive {
  stroke: #127343;
  width: 1.2rem;
  height: 1.2rem;
}
.total-conversion__arrow--negative {
  stroke: #D72F4D;
  width: 1.2rem;
  height: 1.2rem;
}
.total-conversion__count {
  font-size: 1.6rem;
  color: var(--black-col);
  font-weight: 600;
  margin-right: 0.5rem;
}

.campaign-card {
  border-radius: 1.8rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  padding: 2rem 2rem 2.7rem;
  margin-bottom: 0.4rem;
  position: relative;
}
@media only screen and (max-width: 64em) {
  .campaign-card {
    border-style: none;
    padding-bottom: 1.8rem;
  }
}
.campaign-card__title {
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 600;
  color: var(--black-col);
  line-height: 130%;
}
@media only screen and (max-width: 62.3125em) {
  .campaign-card__title br {
    display: none;
  }
}
.campaign-card__button {
  background-color: #E5E8F2;
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  border: 0;
  margin-top: 1.2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.campaign-card__button.completed-button {
  background-color: #0D7C56;
}
.campaign-card__button.planning-button {
  background-color: #4B64BF;
}
.campaign-card__button.in-progress-button {
  background-color: #D19F1F;
}
.campaign-card__campaign-status {
  color: #FFFFFF;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
}
.campaign-card__check {
  width: 1.5rem;
  height: 1.5rem;
  stroke: #FFFFFF;
  margin-right: 0.5rem;
}
.campaign-card__description {
  font-size: 1.5rem;
  color: var(--black-col);
  font-style: normal;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  max-height: 4.5em;
  line-height: 1.5em;
  transition: max-height 0.3s ease;
}
.campaign-card__description.show {
  -webkit-line-clamp: unset;
  max-height: none;
  word-break: break-word;
}

.details-tables {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--details-table-border);
  background: var(--card-color);
  padding: 1.6rem;
  margin-bottom: 2rem;
}
.details-tables__overflow {
  overflow-x: scroll;
  margin: 0 0rem 2rem;
  position: relative;
}
.details-tables__overflow::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  display: none;
}
.details-tables__overflow::-webkit-scrollbar-thumb {
  background-color: #949494;
  border-radius: 2rem;
}
.details-tables__overflow::-webkit-scrollbar-track {
  background-color: #D9D9D9;
  border-radius: 2rem;
}
.details-tables__overflow::-webkit-scrollbar-thumb:hover {
  background-color: #878585;
}
@media only screen and (max-width: 90em) {
  .details-tables__overflow {
    margin: 0 0 2rem;
  }
}
.details-tables__last-update {
  min-width: 500px;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__last-update {
    min-width: unset;
  }
  .details-tables__last-update .details-tables__lists {
    flex-direction: column;
    align-items: flex-start;
  }
}
.details-tables__pending-task {
  min-width: 720px;
}
.details-tables__quotation-table {
  min-height: 500px;
}
.details-tables__head {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.details-tables__head--icon {
  display: flex;
  width: 3.2rem;
  height: 3.2rem;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background: var(--gray-icon-color);
  margin-right: 1.2rem;
  min-width: 3.2rem;
  min-height: 3.2rem;
}
.details-tables__head--icon svg {
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
}
.details-tables__head--icon.pending-task svg {
  width: 1.8rem;
  height: 1.2rem;
  stroke: var(--black-col);
}
.details-tables__head--icon.purchase-history svg {
  width: 1.4rem;
  height: 1.5rem;
  stroke: var(--black-col);
}
.details-tables__head h3 {
  color: var(--black-col);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.17px;
}
.details-tables__lists {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--details-table-border);
  flex-wrap: nowrap;
  gap: 1rem;
  position: relative;
}
.details-tables__lists span {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .details-tables__lists span {
    font-size: 1.4rem;
  }
}
.details-tables__lists .profile-icon-sm {
  font-size: 1.2rem;
  font-weight: 700;
}
.details-tables__lists:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.details-tables__lists .title {
  color: var(--head-primary-color);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.details-tables__user {
  display: flex;
  align-items: center;
  width: 25%;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__user {
    width: unset;
  }
}
@media only screen and (max-width: 48em) {
  .details-tables__user.user-name {
    width: 58%;
  }
}
.details-tables__user .profile__icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #040919;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  margin-left: 0;
  margin-right: 0;
  min-width: 3.2rem;
  min-height: 3.2rem;
}
.details-tables__user .profile__icon.profile-icon-sm {
  font-size: 1.2rem;
  font-weight: 700;
}
.details-tables__user img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
}
.details-tables__user--name {
  margin-left: 0.8rem;
}
.details-tables__dates {
  width: 35%;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 48em) {
  .details-tables__dates {
    width: 100%;
  }
}
@media only screen and (max-width: 75em) {
  .details-tables__dates {
    flex-wrap: nowrap;
    width: 100%;
  }
}
.details-tables__dropdown .persuite-dropdown-menu {
  right: 0;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__dropdown {
    position: absolute;
    right: -1rem;
  }
}
.details-tables__task {
  display: flex;
  align-items: center;
  flex: 1;
}
.details-tables__task svg {
  width: 1.4rem;
  height: 2rem;
  margin-right: 0.8rem;
}
.details-tables__task svg.red {
  fill: #D72F59;
}
.details-tables__task svg.blue {
  fill: #2B449D;
}
.details-tables__task svg.gray {
  fill: #7C849C;
}
.details-tables__assigned {
  flex: 1;
}
.details-tables__done {
  flex: 1;
}
.details-tables__done-btn {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem;
  border-style: none;
  border-radius: 16px;
  border: 1px solid #CDD1E4;
  background-color: transparent;
  cursor: pointer;
  color: var(--black-col);
}
.details-tables__done-btn span {
  white-space: nowrap;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__done-btn span {
    display: none;
  }
}
.details-tables__done-btn svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  margin-right: 0.6rem;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__done-btn svg {
    margin-right: 0;
  }
}
.details-tables__done-btn.active {
  background-color: #0D7C56;
  color: #FFFFFF;
}
.details-tables__done-btn.active svg {
  stroke: #FFFFFF;
}
.details-tables__done-btn.active span {
  color: #FFFFFF;
}
.details-tables__pending-task .details-tables__dates {
  flex: 1;
  width: auto;
}
.details-tables__last-quotation {
  display: flex;
  align-items: center;
  flex: 1;
}
.details-tables__last-quotation span {
  white-space: nowrap;
}
.details-tables__purchase-history {
  width: 25%;
}
.details-tables__status {
  flex: 1;
}
.details-tables__quotation {
  width: 30%;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__quotation {
    flex: 1;
    width: auto;
  }
}
.details-tables__amount {
  width: 10%;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__amount {
    flex: 1;
    width: auto;
  }
}
.details-tables__valid-till {
  width: 15%;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__valid-till {
    flex: 1;
    width: auto;
  }
}
.details-tables__qt-status {
  width: 10%;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__qt-status {
    flex: 1;
    width: auto;
  }
}
.details-tables__qt-dropdown {
  width: 35%;
  display: flex;
  justify-content: end;
}
@media only screen and (max-width: 62.3125em) {
  .details-tables__qt-dropdown {
    width: auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .details-tables__qt-dropdown {
    flex: 1;
    width: auto;
  }
}
.details-tables__document {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__document {
    align-items: flex-start;
  }
}
.details-tables__document--details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  gap: 2rem;
}
@media only screen and (max-width: 85.37em) {
  .details-tables__document--details {
    width: unset;
    gap: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .details-tables__document--details {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.details-tables__document--upload-date {
  display: flex;
  flex-wrap: nowrap;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__document--upload-date {
    margin-left: 4rem;
  }
}
.details-tables__document--file {
  display: flex;
  align-items: center;
}
.details-tables__document--icon {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  margin-right: 0.8rem;
  min-height: 3.2rem;
  min-width: 3.2rem;
  max-height: 3.2rem;
  max-width: 3.2rem;
}
.details-tables__document--icon.pdf-icon {
  background: #F8E5EA;
}
.details-tables__document--icon.pdf-icon svg {
  width: 1.4rem;
  height: 1.7rem;
  fill: #B0193E;
}
.details-tables__document--icon.video-icon {
  background-color: #E8EDFF;
}
.details-tables__document--icon.video-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #2B449D;
}
.details-tables__document--icon.audio-icon {
  background-color: #E0F8F0;
}
.details-tables__document--icon.audio-icon svg {
  width: 1.4rem;
  height: 1.7rem;
  fill: #059765;
}
.details-tables__document--icon.image-icon {
  background-color: #E4F3FF;
}
.details-tables__document--icon.image-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #3D89C7;
}
.details-tables__document--icon.ppt-icon {
  background-color: rgba(255, 145, 110, 0.4);
}
.details-tables__document--icon.ppt-icon svg {
  width: 2rem;
  height: 2rem;
}
.details-tables__document--icon.wordIcon {
  background-color: #E4F3FF;
}
.details-tables__document--icon.wordIcon svg {
  width: 2rem;
  height: 2rem;
}
.details-tables__document--icon.file-crm-icon {
  background-color: rgba(88, 159, 243, 0.5019607843);
}
.details-tables__document--icon.file-crm-icon svg {
  width: 2rem;
  height: 2rem;
}
.details-tables__document--icon.excess-file {
  background-color: rgba(73, 217, 138, 0.4117647059);
}
.details-tables__document--icon.excess-file svg {
  width: 2rem;
  height: 2rem;
}
.details-tables.details-notes-table {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  width: fit-content;
  position: relative;
  min-width: 100%;
}
@media only screen and (max-width: 75em) {
  .details-tables.details-notes-table {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}
.details-tables__notesUser {
  flex: 1;
}
.details-tables__notesUser .base-font {
  white-space: nowrap;
}
.details-tables__notes {
  display: flex;
  align-items: center;
  flex: 1;
}
.details-tables__notes .note {
  width: 240px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 75em) {
  .details-tables__notes .note {
    width: 400px;
  }
}
@media only screen and (max-width: 48em) {
  .details-tables__notes .note {
    width: 180px;
  }
}
.details-tables__created-on {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}
.details-tables__created-on .sub-head {
  white-space: nowrap;
}
.details-tables__created-on .base-font {
  white-space: nowrap;
}
@media only screen and (max-width: 75em) {
  .details-tables__created-on {
    flex-wrap: nowrap;
  }
}
.details-tables__pinned-dropdown {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: end;
}
@media only screen and (max-width: 75em) {
  .details-tables__pinned-dropdown {
    position: absolute;
    right: 1.6rem;
    height: 2rem;
  }
}
.details-tables__pinned-dropdown .pinned-note {
  border-radius: 3.6rem;
  border: 1px solid #2B449D;
  padding: 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  margin-right: 2rem;
  white-space: nowrap;
}
@media only screen and (max-width: 37.5em) {
  .details-tables__pinned-dropdown .pinned-note {
    margin-right: 3rem;
  }
}
.details-tables__pinned-dropdown .pinned-note span {
  color: var(--head-primary-color);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.details-tables__pinned-dropdown .pinned-note svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.4rem;
  stroke: var(--head-primary-color);
}
.details-tables__link {
  text-decoration: underline;
  color: var(--black-col);
  font-weight: 500;
}
.details-tables .user-img-sm {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  margin-right: 0.6rem;
}

.communication-accordion__item {
  border: 1px solid var(--details-table-border);
  border-radius: 1rem;
  margin-bottom: 1.2rem;
}
@media only screen and (max-width: 64em) {
  .communication-accordion__item {
    padding-bottom: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .communication-accordion__item {
    padding-bottom: 0;
  }
}
.communication-accordion__header {
  border-radius: 1rem;
  background: transparent;
  border-style: none;
  padding: 1.5rem;
  width: 100%;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.communication-accordion__header--name-time {
  width: 50%;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 85.37em) {
  .communication-accordion__header--name-time {
    width: auto;
    gap: 2rem;
  }
}
.communication-accordion__header--name-time span {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  line-height: 130%;
  white-space: nowrap;
}
.communication-accordion__header .user-icon-name {
  display: flex;
  align-items: center;
  width: 50%;
}
@media only screen and (max-width: 85.37em) {
  .communication-accordion__header .user-icon-name {
    width: auto;
  }
}
.communication-accordion__header .user-icon-name img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  margin-right: 0.8rem;
}
.communication-accordion__header .user-icon-name span {
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
}
.communication-accordion__header .user-icon-name__letter {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  margin-right: 0.8rem;
  overflow: hidden;
  background-color: var(--lite-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700 !important;
}
.communication-accordion__header--time {
  display: flex;
}
@media only screen and (max-width: 64em) {
  .communication-accordion__header--time {
    flex-direction: column;
  }
}
.communication-accordion__content {
  max-height: 0;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 1.5rem;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
@media only screen and (max-width: 64em) {
  .communication-accordion__content {
    flex-direction: column;
  }
}
@media only screen and (max-width: 37.5em) {
  .communication-accordion__content {
    padding: 0;
  }
}
.communication-accordion__content .sm-title {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: block;
  margin-bottom: 0.8rem;
}
.communication-accordion__content ul {
  padding-left: 2rem;
  padding-bottom: 1.5rem;
}
.communication-accordion__content li {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%;
}
.communication-accordion__content li::marker {
  color: #A0CC16;
}
.communication-accordion__content--desc {
  padding: 2rem;
}
.communication-accordion__content--channel {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;
  border-left: 1px solid #E5E8F2;
}
.communication-accordion__content--channel svg {
  width: 2.3rem;
  height: 2.3rem;
  fill: var(--black-col);
  margin-right: 0.8rem;
}
@media only screen and (max-width: 37.5em) {
  .communication-accordion__content--channel {
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    background-color: #EFF2FF;
    border-radius: 0;
    border-style: none;
  }
}
.communication-accordion__content--channel .profile img {
  object-fit: cover;
  width: 2.4rem;
  height: 2.4rem;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 1rem;
}

.arrow {
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}
.arrow svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--black-col);
}

.communication-accordion__header.active .arrow {
  transform: rotate(0deg);
}

.underline-tab {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.underline-tab__button {
  background: none;
  border: none;
  margin: 1.5rem 2rem 0 0;
  padding-bottom: 1.5rem;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: color 0.3s;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
}
.underline-tab__button::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transform: scaleX(0);
  transform-origin: bottom left;
}
.underline-tab__button.tab-active::after {
  background-color: var(--black-col);
  transform: scaleX(1);
}
.underline-tab__content {
  display: none;
}
.underline-tab__content.tab-active {
  display: block;
}

.tab-underline {
  height: 2px;
  background-color: #CDD1E4;
  margin-bottom: 1.6rem;
  opacity: 0.3;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.15s linear;
  z-index: 1111;
  /* &__fields {
      padding: 2rem;
  }*/
}
.modal__dialog {
  z-index: 1112;
  position: relative;
  height: 100%;
}
.modal__content {
  background-color: var(--modal-bg);
  border-radius: 1.8rem;
  position: absolute;
  padding: 0.4rem;
  width: 54rem;
}
@media only screen and (max-width: 37.5em) {
  .modal__content {
    width: 90vw;
  }
}
@media only screen and (max-width: 37.5em) {
  .modal__content.campaign-create-modal {
    width: 38rem;
  }
}
.modal__notitfication__content {
  width: 58rem;
  top: 0;
  right: 0;
  border-radius: 0;
  height: 100vh;
}
.modal__notitfication__content .modal__box {
  border-style: none;
}
@media only screen and (max-width: 37.5em) {
  .modal__notitfication__content {
    width: 100%;
  }
}
.modal__box {
  border-radius: 1.6rem;
  border: 1px solid var(--modal-border);
  height: 100%;
}
.modal__head {
  padding: 1.8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--modal-border);
  position: relative;
  background-color: var(--modal-head);
  border-radius: 1.5rem 1.5rem 0 0;
}
.modal__head h2 {
  display: inline;
  color: var(--black-col);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.modal__head svg {
  width: 1.6rem;
  height: 1.7rem;
  stroke: var(--black-col);
}
.modal__sub-heading {
  margin-left: 0.6rem;
}
.modal__fields {
  padding: 2rem;
  min-height: calc(100vh - 21rem);
  overflow-y: auto;
  margin-bottom: 6rem;
}
.modal__fields::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.modal__fields::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.modal__fields--notification {
  overflow-y: auto;
  height: calc(100vh - 170px);
}
.modal__fields--notification::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.modal__fields--notification::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.modal__fields.quotation-fields {
  min-height: calc(100vh - 27rem);
}
.modal__fields--single-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.modal__close {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #040919;
  cursor: pointer;
}
.modal__label {
  color: var(--modal-label);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  display: block;
  margin-bottom: 1rem;
}
.modal__label--required {
  color: #D72F59;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}
.modal__texarea--box {
  width: 100%;
}
.modal__texarea--box--textarea {
  width: 100%;
  border-style: none;
  border-bottom: 1px solid var(--custom-input-border);
  outline: none;
  resize: vertical;
  height: 6rem;
  background-color: transparent;
  color: var(--black-col);
  font-family: "DM Sans", sans-serif;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  resize: none;
  font-size: 1.5rem;
}
.modal__texarea--box--textarea.border-textarea {
  border: 1px solid var(--custom-input-border);
  border-radius: 0.8rem;
  background-color: transparent;
  height: auto;
  padding: 0.6rem;
}
.modal__input--box {
  width: 100%;
  margin: 1.5rem 0;
}
.modal__input--box--input {
  width: 100%;
  border-style: none;
  outline: none;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  background-color: transparent;
  -moz-appearance: textfield;
}
.modal__input--box--input.border-btm {
  border-bottom: 1px solid var(--custom-input-border);
}
.modal__input--box.iserror .border-btm {
  border-bottom: 1px solid var(--error-msg);
}
.modal__input--box--icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.modal__input--box--date-picker {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--custom-input-border);
  padding-bottom: 0.6rem;
}
.modal__input--box--form-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #A5ABC3;
  padding-bottom: 0.6rem;
}
.modal__selec-box {
  width: 100%;
  margin: 2rem 0;
}
.modal__footer {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background-color: var(--modal-border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1.6rem 2rem;
  border-bottom-left-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
}
.modal__footer.import {
  position: static;
}
.modal__reset-button {
  background: unset;
  border: unset;
  margin-right: 2rem;
  cursor: pointer;
}
.modal__reset-icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
}
.modal__reset {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: var(--black-col);
}
.modal.show {
  display: block;
  opacity: 1;
  visibility: visible;
}
.modal__inner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.modal__inner-grid.gap-lf-rt {
  gap: 1rem 2rem;
}
@media only screen and (max-width: 37.5em) {
  .modal__inner-grid.campaign-create-modal {
    grid-template-columns: 1fr;
  }
}
.modal__upload-box {
  border: 2px dashed #8498E1;
  background-color: #F5F7FF;
  border-radius: 0.8rem;
  width: 90%;
  max-width: 85.6rem;
  margin: 2rem auto;
  padding: 5rem;
  text-align: center;
  box-sizing: border-box;
  gap: 1rem;
}
.modal__upload-icon {
  width: 1.6rem;
  height: 1.6rem;
}
.modal__upload-icon-main {
  border: 1px solid #2B449D;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  cursor: pointer;
  margin: auto;
  margin-bottom: 1.6rem;
}
.modal__upload-text {
  font-size: 1.7rem;
  font-weight: 700;
  color: #040919;
  padding-bottom: 0.5rem;
}
.modal__sub-text {
  font-size: 1.5rem;
  font-weight: 400;
}
.modal__file-upload {
  display: none;
}
.modal__text {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.modal .iserror .border-btm {
  border-bottom: 1px solid var(--error-msg) !important;
}
.modal__multiselect {
  width: 100%;
  border-bottom: 1px solid var(--custom-input-border);
  position: relative;
}
.modal__multiselect--select {
  width: 100%;
  background-color: transparent;
}
.modal__multiselect--icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
  position: absolute;
  right: 0;
  top: 3rem;
}
.modal__canclel-btn {
  border-radius: 4.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  color: var(--button-text);
  border: 1px solid var(--button-border);
  justify-content: center;
  background-color: transparent;
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
  position: relative;
}
.modal__file-upload--input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--custom-input-border);
  padding: 0 0 0.8rem;
  cursor: pointer;
  background-color: transparent;
  width: 100%;
  position: relative;
  color: var(--black-col);
  font-weight: 500;
}
.modal__file-upload--input {
  display: none;
}
.modal__file-upload--icon {
  width: 1.2rem;
  min-width: 1.2rem;
  height: 1.6rem;
  fill: var(--black-col);
}

.readmore {
  color: var(--black-col);
  text-decoration: underline;
  font-weight: 400;
  font-size: 1.5rem;
}

@media only screen and (max-width: 75em) {
  .revenue-card {
    flex-direction: column;
    margin-bottom: 1.6rem;
  }
}
@media only screen and (max-width: 75em) {
  .revenue-card.actual-budjet-revenue {
    display: flex;
  }
}
@media only screen and (max-width: 37.5em) {
  .revenue-card.actual-budjet-revenue {
    display: block;
  }
}
.revenue-card__card {
  border-radius: 1rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  padding: 1.6rem;
  padding-bottom: 0;
  width: 50%;
  position: relative;
  min-height: 18rem;
  padding-bottom: 0;
}
@media only screen and (max-width: 75em) {
  .revenue-card__card {
    width: 100%;
    margin-bottom: 1.6rem;
  }
}
.revenue-card__head-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 16px;
  background: var(--gray-icon-color);
  margin-right: 1.2rem;
}
.revenue-card__icon {
  width: 1.6rem;
  height: 1.5rem;
  stroke: var(--black-col);
}
.revenue-card__heading {
  color: var(--black-col);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.revenue-card__chart {
  margin-top: -20px !important;
  margin-left: -24px !important;
}
.revenue-card__count {
  font-size: 2.6rem;
  color: var(--black-col);
  font-weight: 600;
  line-height: 130%;
  margin-top: 0.2rem;
  margin-left: 4.5rem;
}
.revenue-card__profit {
  color: #127343;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.form-scheduler__options {
  margin-bottom: 2rem;
}
.form-scheduler__option {
  margin-top: 2rem;
}
.form-scheduler__checkbox {
  margin-right: 1rem;
}
.form-scheduler__label {
  font-size: 1.5rem;
  color: var(--black-col);
  font-weight: 500;
}
.form-scheduler__schedule {
  padding: 1rem;
  border: 1px solid var(--custom-input-border);
  border-radius: 0.8rem;
  padding-bottom: 0;
  margin-bottom: 1.6rem;
}
.form-scheduler__header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  width: 100%;
  cursor: pointer;
}
.form-scheduler__title {
  font-size: 1.5rem;
  font-weight: 600;
  padding-top: 0.5rem;
}
.form-scheduler__type {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2.5rem;
}
.form-scheduler__type label {
  margin-left: 2.4rem;
  color: var(--black-col);
  font-weight: 500;
  align-items: center;
  display: flex;
}
.form-scheduler__radio {
  margin-right: 0.8rem;
}
.form-scheduler__dates {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.form-scheduler__date {
  display: flex;
  flex-direction: column;
}
.form-scheduler__date-label {
  margin-bottom: 0.5rem;
  font-size: 104rem;
}
.form-scheduler__date-input {
  padding: 0.5rem;
  font-size: 1.4rem;
}
.form-scheduler__repeat {
  display: flex;
  flex-direction: column;
}
.form-scheduler__repeat-label {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}
.form-scheduler__repeat-select {
  padding: 0.5rem;
  font-size: 1.4rem;
}
.form-scheduler__date-picker {
  margin-left: 3rem;
}
.form-scheduler__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in;
}
.form-scheduler__body.open {
  max-height: fit-content;
  overflow: visible;
  transition: max-height 0.2s ease-in;
  padding-bottom: 1rem;
}
.form-scheduler__subtitle {
  font-size: 1.9rem;
  font-weight: 600;
  color: #040919;
  margin: 1.6rem 0;
}
.form-scheduler .date-picker__inputbox {
  width: 30rem;
}
.form-scheduler .date-picker__inputbox:first-child {
  margin-right: 1rem;
}
.form-scheduler .form-scheduler__checkbox:checked ~ .form-scheduler__body {
  max-height: 300px;
}
.form-scheduler .modal__select--box {
  margin-left: 2.5rem;
  margin-top: 3rem;
  padding-bottom: 2rem;
  width: 30rem;
}

.kebab_button {
  background-color: transparent;
  border-style: none;
  padding: unset;
  border: 1px solid #A5ABC3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  cursor: pointer;
}
.kebab_button svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
@media only screen and (max-width: 64em) {
  .kebab_button .mobile {
    display: block;
  }
}

.top-bar {
  padding: 1rem;
  background-color: #B8CCF3;
  position: fixed;
  width: 100%;
  z-index: 99;
  transition: top 2s ease;
  top: 0;
  left: 0;
  right: 0;
}
.top-bar.hidden {
  top: -100%;
}
.top-bar.warning {
  background-color: #F9E1C5;
}
.top-bar.renew {
  background-color: #F3C1CA;
}
.top-bar__text {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  color: #040919;
}
@media only screen and (max-width: 37.5em) {
  .top-bar__text {
    font-size: 1.3rem;
    width: 55%;
  }
}
.top-bar__button {
  color: #FFFFFF;
  background-color: #1053D4;
  border: none;
  border-radius: 1.5rem;
  padding: 0.5rem 1.6rem;
  margin-left: 1.6rem;
}
.top-bar__button.warning-btn {
  background-color: #E9820A;
}
.top-bar__button.renew-btn {
  background-color: #D72F4D;
}
.top-bar__icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke: #040919;
  position: absolute;
  right: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.user-primary-info {
  border-radius: 1.8rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  padding: 2rem 2rem 2.7rem;
  margin-bottom: 0.4rem;
  position: relative;
}
.user-primary-info.active {
  background-color: var(--user-info-active);
  border-radius: 1.8rem;
  border: 1px solid var(--user-info-border);
}
@media only screen and (max-width: 90em) {
  .user-primary-info {
    padding: 1.4rem 1.5rem 1.7rem;
  }
}
@media only screen and (max-width: 64em) {
  .user-primary-info {
    border-style: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 2rem 1rem;
  }
}
.user-primary-info__texts {
  border-style: none;
  outline: none;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  cursor: default;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-primary-info__editable {
  border-bottom: 1px solid rgba(177, 167, 167, 0.438);
  width: 100%;
  cursor: text;
}
.user-primary-info__top {
  display: block;
  margin-bottom: 1.6rem;
}
.user-primary-info__img-status {
  display: flex;
  align-items: center;
}
.user-primary-info .status-icons {
  width: 3.2rem;
  height: 3.2rem;
  gap: 0.8rem;
  margin-left: -0.7rem;
}
.user-primary-info .status-icons svg {
  height: 1.5rem;
  width: 1.5rem;
}
.user-primary-info__name-company {
  margin-top: 1.4rem;
}
.user-primary-info__name-company .header-4 {
  margin-bottom: 0.4rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}
.user-primary-info__name-company .header-5, .user-primary-info__name-company .header-6 {
  color: var(--card-text);
  margin-bottom: 0.4rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.user-primary-info__decision {
  margin-top: 1.6rem;
  gap: 1rem;
  position: relative;
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .user-primary-info__decision {
    position: absolute;
    top: 3rem;
    right: 2rem;
  }
}
.user-primary-info__decision .text-edit {
  border: none;
  background: transparent;
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  display: none;
}
.user-primary-info__decision .text-edit.active {
  display: inline;
}
.user-primary-info__decision-text-true {
  border-radius: 1.3rem;
  border: 1px solid var(--card-button-border);
  background: var(--card-button-bg);
  padding: 0.3rem 1rem;
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  white-space: nowrap;
  position: relative;
  display: none;
}
.user-primary-info__decision-text-true.active {
  display: inline-block;
}
.user-primary-info__decision.active {
  display: inline;
}
.user-primary-info__edit-icon {
  position: absolute;
  right: 2rem;
  display: none;
}
@media only screen and (max-width: 85.37em) {
  .user-primary-info__edit-icon {
    top: 0.8rem;
  }
}
.user-primary-info__edit-icon svg {
  stroke: var(--black-col);
}
.user-primary-info__edit-icon.showIcon {
  display: block;
}
.user-primary-info--qualify {
  position: relative;
}

.show-more-btn {
  border-style: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .show-more-btn {
    display: block;
  }
}
.show-more-btn span {
  color: #2B449D;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.show-more-btn__icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: #2B449D;
  margin-top: 0.2rem;
  margin-left: 0.6rem;
  transition: 0.3s ease-in-out;
  rotate: 180deg;
}
.show-more-btn__icon.active {
  rotate: 0deg;
}

.kebab-dropdown {
  border-style: none;
  position: relative;
  background-color: transparent;
  cursor: pointer;
}
.kebab-dropdown__icon {
  width: 0.4rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.kebab-dropdown__container {
  position: absolute;
  top: 1.6rem;
  background-color: var(--kebab-bg);
  z-index: 111;
  padding: 2px;
  border-radius: 0.5rem;
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.11);
  display: none;
  color: var(--black-col);
  /*        &.persuite-dropdown-menu {
      right: 0 !important;
      left: auto !important;
  }*/
  /*        &.import {
      background-color: $color-white;
      border-radius: 1rem;
      width: 23rem;
      padding: 1.5rem;
      box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);

      @include respond(phone) {
          right: 3.8rem;
          top: 10rem;
      }
  }*/
}
.kebab-dropdown__container.show {
  display: block;
}
.kebab-dropdown__container.import {
  background-color: var(--kebab-bg);
  border-radius: 1rem;
  width: 17rem;
  padding: 0.2rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  top: 4.6rem;
}
@media only screen and (max-width: 37.5em) {
  .kebab-dropdown__container.import {
    right: 0;
    top: 5.3rem;
  }
}
.kebab-dropdown__container.export {
  background-color: var(--kebab-bg);
  border-radius: 1rem;
  width: 17rem;
  padding: 0.2rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  top: 4.6rem;
}
@media only screen and (max-width: 37.5em) {
  .kebab-dropdown__container.export {
    right: 0;
    top: 10rem;
  }
}
.kebab-dropdown__container.import-export {
  top: 0;
  right: unset;
  left: 0;
}
.kebab-dropdown__container.import-export.show {
  top: 4.7rem;
  transition: all 0.3s ease-in-out;
}
.kebab-dropdown__container.report {
  right: 2.8rem;
  top: 12rem;
  background-color: var(--kebab-bg);
  border-radius: 1rem;
  width: 23rem;
  padding: 1.5rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
}
@media only screen and (max-width: 37.5em) {
  .kebab-dropdown__container.report {
    right: 3.8rem;
    top: 10rem;
  }
}
.kebab-dropdown__container.kebab-mobile {
  right: 2.8rem;
  top: 12rem;
  background-color: var(--kebab-bg);
  border-radius: 1rem;
  width: 23rem;
  padding: 1.5rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
}
@media only screen and (max-width: 48em) {
  .kebab-dropdown__container.kebab-mobile {
    right: 3.8rem;
    top: 20rem;
  }
}
.kebab-dropdown__list {
  list-style: none;
}
.kebab-dropdown__drop-down-list {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  border-radius: 0.6rem;
}
.kebab-dropdown__drop-down-list:last-child {
  margin-bottom: 0;
}
.kebab-dropdown__drop-down-list:hover {
  background-color: var(--dropdown-hover);
}
.kebab-dropdown__dropdown-icon {
  width: 1.5rem;
  height: 2rem;
  margin-right: 1rem;
}
.kebab-dropdown__dropdown-icon.pdf-icon {
  fill: #6B0D12;
}
.kebab-dropdown__name {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--black-col);
}
.kebab-dropdown__items {
  padding: 0.6rem 2rem;
  width: 14rem;
  background-color: var(--kebab-bg);
  text-align: left;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.kebab-dropdown__items span {
  white-space: nowrap;
  color: var(--black-col);
}
.kebab-dropdown__items:hover {
  background-color: var(--kebab-link-hover);
}
.kebab-dropdown__items--icons {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  margin-right: 1rem;
  cursor: pointer;
}
.kebab-dropdown__items.show {
  display: block;
}
.kebab-dropdown__items.top {
  bottom: 100%;
  top: auto;
  left: 0;
}

.dark-mode-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background-color: transparent;
  border-radius: 50%;
  border-style: none;
  display: flex;
  justify-content: center;
  border: 1px solid #A5ABC3;
  align-items: center;
  margin-right: 1.6rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out;
}
.dark-mode-button__light-mode {
  opacity: 1;
  width: 2rem;
  height: 2rem;
  position: absolute;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease;
}
.dark-mode-button__dark-mode {
  opacity: 0;
  width: 2rem;
  height: 2rem;
  position: absolute;
  transform: translateX(50px);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease;
}
.dark-mode-button.dark {
  background-color: #111418;
}
.dark-mode-button.dark .dark-mode-button__light-mode {
  opacity: 0;
  transform: translateX(50px);
}
.dark-mode-button.dark .dark-mode-button__dark-mode {
  opacity: 1;
  transform: translateX(0);
}

.main-section {
  grid-column: 5/25;
  padding-left: 2.4rem;
}
@media only screen and (max-width: 90em) {
  .main-section {
    grid-column: 6/25;
  }
}
@media only screen and (max-width: 62.3125em) {
  .main-section {
    grid-column: 1/25;
    padding-left: 0;
  }
}

.information {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
}
.information__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #555B6C;
}
.information__text {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.new-quotation-user {
  width: 100%;
  background-color: var(--new-quotation-user-bg);
  border-radius: 1rem;
  padding: 1.6rem;
  display: flex;
  gap: 1.6rem;
  min-width: 37rem;
}
@media only screen and (max-width: 23.4em) {
  .new-quotation-user {
    min-width: 33rem;
  }
}
.new-quotation-user__img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 2.4rem;
}
.new-quotation-user__img.first-letter {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #8498E1;
}
.new-quotation-user__name {
  color: var(--chart-label);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.22px;
  margin-bottom: 0.4rem;
  word-break: break-word;
}
.new-quotation-user__mail {
  color: var(--chart-label);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.new-quotation-user__details {
  display: flex;
  margin-top: 1.4rem;
  gap: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .new-quotation-user__details {
    flex-direction: column;
    gap: 1rem;
  }
}
.new-quotation-user__details--head {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}
.new-quotation-user__details--detail {
  color: var(--chart-label);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  width: 18rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.select-box {
  position: relative;
  display: inline-block;
  position: relative;
  width: 100%;
  background-color: var(--modal-bg);
}
.select-box__trigger {
  background-color: var(--modal-bg);
  border-bottom: 1px solid var(--custom-input-border);
  padding: 0.4rem 0 0.4rem;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-box__trigger--icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  position: absolute;
  right: 0.2rem;
}
.select-box__options {
  list-style-type: none;
  margin: 0;
  position: absolute;
  width: 100%;
  background: var(--card-color);
  border-top: none;
  display: none;
  z-index: 1;
  border-radius: 0.3rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
}
.select-box__option {
  padding: 10px;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  border-radius: 0.5rem;
}
.select-box__option:hover {
  background-color: var(--select-hover);
}
.select-box__show {
  display: block;
}

.notification {
  border-radius: 0.8rem;
  background: var(--notification-color);
  padding: 1.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.notification:hover {
  background: var(--notification-rounded-hover);
}
.notification:hover .notification__rounded {
  background-color: var(--notification-rounded-hover);
}
.notification__content {
  display: flex;
}
.notification__rounded {
  min-width: 4rem;
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--notification-rounded);
  margin-right: 1.2rem;
  transition: 0.2s ease-in-out;
}
.notification__rounded--icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
}
.notification__text {
  color: var(--notification-text);
  font-weight: 400;
  margin-bottom: 0.8rem;
}
.notification__time {
  font-weight: 500;
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.notification__read {
  background: var(--notification-read);
}
.notification__mark-read {
  position: absolute;
  right: 5rem;
  color: #002FC6;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-decoration-line: underline;
  border-style: none;
  background-color: transparent;
  cursor: pointer;
}

.main-dropdown {
  position: relative;
  margin-right: 1.5rem;
  cursor: pointer;
}
.main-dropdown__toggle {
  cursor: pointer;
  color: var(--lite-font-col);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  padding: 0 0.3rem;
  position: relative;
  z-index: 11;
}
@media only screen and (max-width: 90em) {
  .main-dropdown__toggle {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 75em) {
  .main-dropdown__toggle {
    font-size: 1.3rem;
  }
}
.main-dropdown__toggle--icon {
  position: absolute;
  right: -1.4rem;
  top: 50%;
  transform: translate(0%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--lite-font-col);
}
.main-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 23rem;
  background-color: var(--table-container);
  padding: 2px;
  border-radius: 1rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  display: none;
  z-index: 107;
  transition: top 0.2s ease;
  max-height: 22rem;
  overflow-y: auto;
}
.main-dropdown__menu::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.main-dropdown__menu::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.main-dropdown__menu.show {
  display: block;
}
.main-dropdown__item {
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.main-dropdown__item:hover {
  background-color: var(--dropdown-hover);
}
.main-dropdown__item.selected .main-dropdown__icon {
  visibility: visible;
}
.main-dropdown__icon {
  visibility: hidden;
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}

.conversion-rate__container {
  border-radius: 1.8rem;
  border: 1px solid var(--lite-gray);
  padding: 0.6rem;
  margin-top: 1rem;
}
.conversion-rate__box {
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
}
.conversion-rate__boxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.black-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1.6rem;
  background-color: #040919;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 90em) {
  .black-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}
.black-icon__svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #FFFFFF;
}

.sales-funnel__chart {
  width: 100%;
}
.sales-funnel__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px;
  font-family: Arial, sans-serif;
}
.sales-funnel__legend-item {
  display: flex;
  align-items: center;
  margin: 0 10px 20px;
}
.sales-funnel__legend-color {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 2px;
}
.sales-funnel__legend-text {
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.gray-icon {
  border-radius: 1.6rem;
  background: var(--gray-icon-color);
  display: flex;
  width: 3.2rem;
  height: 3.2rem;
  justify-content: center;
  align-items: center;
}
.gray-icon__svg {
  stroke: var(--black-col);
  width: 1.6rem;
  height: 1.6rem;
}
.gray-icon__svg.hand-shake {
  width: 2rem;
  height: 1.2rem;
}
.gray-icon__svg.dollar-icon {
  width: 2rem;
  height: 2rem;
}
.gray-icon__svg.microphone {
  width: 2rem;
  height: 1.7rem;
}
.gray-icon__svg.filter {
  width: 2rem;
  height: 2rem;
}

.top-table {
  width: 100%;
}
.top-table__head {
  color: var(--lite-primary);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  padding-bottom: 1.8rem;
  padding-right: 0.8rem;
}
@media only screen and (max-width: 90em) {
  .top-table__head {
    padding: 5px;
  }
}
.top-table__data {
  color: var(--dashboard-table-font);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  padding: 5px 0;
  white-space: nowrap;
  padding-right: 0.8rem;
}
@media only screen and (max-width: 90em) {
  .top-table__data {
    padding: 5px;
    font-size: 1.3rem;
  }
}
.top-table__num {
  text-align: center;
  padding-right: 1rem;
  display: flex;
  justify-content: center;
}
.top-table__title {
  color: var(--dashboard-table-font);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
  display: inline-block;
  padding-right: 0.8rem;
}
@media only screen and (max-width: 90em) {
  .top-table__title {
    font-size: 1.3rem;
  }
}
.top-table__image {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
}
.top-table__head-tr {
  border-bottom: 1px solid #F5F6FA;
}
.top-table tr:nth-child(1) .top-table__num span {
  background-color: #D3A350;
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
}
.top-table tr:nth-child(2) .top-table__num span {
  background-color: #A6A6A6;
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
}
.top-table tr:nth-child(3) .top-table__num span {
  background-color: #A85940;
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
}
.top-table__scroll {
  overflow-x: auto;
}
.top-table__scroll::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--top-table-scroll-bar);
  border-radius: 1.5rem;
}
.top-table__scroll::-webkit-scrollbar-thumb {
  background: var(--top-table-scroll-thumb);
  border-radius: 1.5rem;
}

.user-dropdown {
  position: relative;
  display: inline-block;
}
.user-dropdown__toggle {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}
.user-dropdown__icon {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}
.user-dropdown__name {
  margin-right: 0.8rem;
}
.user-dropdown__menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 4px;
  margin-top: 4px;
}
.user-dropdown__select {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.user-dropdown__select:hover {
  background-color: #f1f1f1;
}

/* Summary Details */
.summary {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  margin-top: 4.5rem;
  background: var(--summary-bg);
  border-radius: 0px 0px 10px 10px;
  border: 1px solid var(--border-color);
  position: absolute;
  right: 0;
  width: 100%;
}
.summary__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.summary__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.summary__row {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 8rem;
}
.summary__label {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--summary-label);
}
.summary__value {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--summary-label);
  min-width: 12rem;
}
.summary__total {
  padding-top: 1rem;
  font-size: 1.6rem;
  font-weight: bold;
}
.summary__green {
  color: green;
}
.summary__border {
  border-top: 1px solid #040919;
  width: 100%;
}

.p-0 {
  padding: 0 !important;
}

.t-border {
  border: 1px solid var(--summary-border);
}

.td-b-left {
  border-left: 1px solid var(--summary-border);
}

.td-b-right {
  border-right: 1px solid var(--summary-border);
}

.td-b-bottom {
  border-bottom: 1px solid var(--summary-border);
}

tr.main-table__tfoot td {
  border: none;
}

/*.table-select-box {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    pointer-events: none;
    width: 35rem;

    &__trigger {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .8rem 1.2rem;
        border-radius: .8rem;
        color: var(--black-col);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        border: 0;

        span {
            width: 30rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    &__icon {
        width: 1.6rem;
        height: 1.6rem;
        stroke: var(--black-col);
        transition: transform 0.3s ease;
        display: none;
    }

    &__options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        background: var(--card-color);
        z-index: 10;
        box-shadow: 0px 5px 10px 0px rgba(67, 70, 75, 0.15);
        border-radius: 1rem;
        overflow: hidden;
        margin-top: .4rem;
        transition: top 0.2s ease;
        height: 22rem;
        overflow-y: auto;
        width: 35rem;

        &::-webkit-scrollbar {
            width: .5rem;
            height: .8rem;
            background-color: $color-scroll-bar;
            border-radius: 1.5rem;
        }

        &::-webkit-scrollbar-thumb {
            background: $color-scroll-thumb;
            border-radius: 1.5rem;
        }
    }

    &__option {
        color: var(--black-col);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 500;
        line-height: 130%;
        padding: 1rem 1.2rem;
        cursor: pointer;
        transition: background 0.3s ease;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 35rem;

        &:hover {
            background-color: var(--select-hover);
        }
    }

    &.open .table-select-box__options {
        display: block;
    }

    &.open .table-select-box__icon {
        transform: rotate(-180deg);
    }

    &.edit-mode {
        pointer-events: all;

        .table-select-box__trigger {
            border: 1px solid $color-border;
        }

        .table-select-box__icon {
            display: block;
        }
    }
}
*/
.table-select-box {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  pointer-events: none;
  width: 35rem;
}
.table-select-box__trigger {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem 0.8rem 0.5rem;
  border-radius: 0.8rem;
  color: #555B6C;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  border: 0;
  color: var(--black-col);
}
.table-select-box__trigger span {
  width: 30rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-select-box__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  transition: transform 0.3s ease;
  display: none;
}
.table-select-box__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  background: var(--card-color);
  z-index: 10;
  box-shadow: 0px 5px 10px 0px rgba(67, 70, 75, 0.15);
  border-radius: 1rem;
  overflow: hidden;
  margin-top: 0.4rem;
  transition: top 0.2s ease;
  height: 20rem;
  overflow-y: auto;
  width: 35rem;
}
.table-select-box__options::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.table-select-box__options::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.table-select-box__option {
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 35rem;
}
.table-select-box__option:hover {
  background-color: var(--select-hover);
}
.table-select-box.open .table-select-box__options {
  display: block;
}
.table-select-box.open .table-select-box__icon {
  transform: rotate(-180deg);
}
.table-select-box.edit-mode .table-select-box__trigger {
  border: 1px solid #A5ABC3;
}
.table-select-box.edit-mode {
  pointer-events: all;
}
.table-select-box.edit-mode .table-select-box__icon {
  display: block;
}
.table-select-box.drop-up .table-select-box__options {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.4rem;
  box-shadow: 0px -5px 10px 0px rgba(67, 70, 75, 0.15);
}

.quantity-select-box {
  position: relative;
  width: 100%;
  border-radius: 0.8rem;
  border: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
}
.quantity-select-box__input {
  border-style: none;
  outline: none;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  pointer-events: none;
  background-color: transparent;
  -moz-appearance: textfield;
}
.quantity-select-box.edit-mode {
  border: 1px solid #A5ABC3;
}
.quantity-select-box.edit-mode .quantity-select-box__input {
  pointer-events: all;
  -moz-appearance: auto;
}

.activity-history {
  border-radius: 1rem;
  border: 1px solid #A5ABC3;
  padding: 1.6rem;
  display: flex;
  min-width: 80rem;
}
.activity-history__stage {
  height: 8.8rem;
}
.activity-history__stage--head {
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.vetical-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-right: 3rem;
}
.vetical-timeline__circle {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 3rem;
  border: 1px solid #2B449D;
  background-color: #FFFFFF;
  margin-bottom: 0.5rem;
}
.vetical-timeline__circle.active {
  background-color: #8498E1;
}
.vetical-timeline__line {
  width: 1px;
  height: 7rem;
  background: repeating-linear-gradient(to bottom, #B3C1F3 0%, #B3C1F3 5px, transparent 5px, transparent 10px);
}

.profile-img-rounded {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 3.2rem;
  overflow: hidden;
}

.toaster__content {
  display: flex;
  align-items: flex-start;
  padding: 2rem;
}
.toaster__message {
  flex-grow: 1;
}
.toaster__title {
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 4px;
}
.toaster__text {
  color: #040919;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.toaster__close {
  stroke: #040919;
  width: 1.2rem;
  height: 1.2rem;
}
.toaster__success {
  background-color: #E4F7F1;
  color: #040919;
  border: 1px solid #0D7C56;
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__success--icon {
  fill: #0D7C56;
  margin-right: 1.2rem;
  width: 2rem;
  height: 2rem;
}
.toaster__warning {
  background-color: #FFF8E7;
  color: #040919;
  border: 1px solid #E8A317;
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__warning--icon {
  fill: #E8A317;
  margin-right: 1.2rem;
  width: 2rem;
  height: 1.8rem;
}
.toaster__error {
  background-color: #FEECEC;
  color: #040919;
  border: 1px solid #DC3545;
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__error--icon {
  fill: #DC3545;
  margin-right: 1.2rem;
  width: 2.2rem;
  height: 2.2rem;
}
.toaster__informational {
  background-color: #E8EDFF;
  color: #040919;
  border: 1px solid #4B64BF;
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__informational--icon {
  fill: #4B64BF;
  margin-right: 1.2rem;
  width: 2.4rem;
  height: 2.4rem;
}

.toastify {
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: inline-block;
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
  width: 42rem;
}
.toastify.on {
  opacity: 1;
}
.toastify__close {
  background: 0 0;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  opacity: 0.4;
  padding: 0 0.5rem;
}
.toastify__right {
  right: 1.5rem;
}
@media only screen and (max-width: 23.4em) {
  .toastify__right {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}
.toastify__left {
  left: 1.5rem;
}
@media only screen and (max-width: 23.4em) {
  .toastify__left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}
.toastify__top {
  top: -15rem;
}
.toastify__bottom {
  bottom: -15rem;
}

.advanced-filter-dropdown {
  position: relative;
  display: inline-block;
}
.advanced-filter-dropdown__icon {
  stroke: var(--button-text);
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.6rem;
}
.advanced-filter-dropdown__main {
  position: relative;
}
@media only screen and (max-width: 64em) {
  .advanced-filter-dropdown__main {
    display: none;
  }
}
.advanced-filter-dropdown__main-button {
  border-radius: 4.8rem;
  background-color: transparent;
  border: 1px solid var(--filter-bar-border);
  padding: 0.6rem 1rem;
  color: var(--button-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  position: relative;
  cursor: pointer;
}
.advanced-filter-dropdown__main-area {
  display: none;
  position: absolute;
  top: 110%;
  z-index: 1000;
  left: unset;
  right: 0;
  overflow-y: visible;
  padding: 3px;
  border-radius: 1.8rem;
  background: var(--table-container);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.advanced-filter-dropdown__main-area.show {
  display: block;
}
.advanced-filter-dropdown__button {
  background-color: transparent;
  border-style: none;
  width: 24rem;
  border-bottom: 1px solid #A5ABC3;
  border-radius: 0;
  color: var(--bla);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  position: relative;
  cursor: pointer;
  padding: 0.8rem 1rem;
}
@media only screen and (max-width: 75em) {
  .advanced-filter-dropdown__button {
    width: 21rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .advanced-filter-dropdown__button {
    border-radius: 3rem;
    padding: 0.8rem;
  }
}
.advanced-filter-dropdown__button--head {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  color: #555B6C;
}
.advanced-filter-dropdown__content {
  display: none;
  min-width: 24rem;
  position: absolute;
  top: 115%;
  left: 0;
  z-index: 1000;
  border-radius: 1rem;
  border: 1px solid var(--color-lite-blue);
  background: var(--table-container);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  max-height: 24rem;
  overflow-y: auto;
}
@media only screen and (max-width: 75em) {
  .advanced-filter-dropdown__content {
    width: 21rem;
  }
}
.advanced-filter-dropdown__content.last-content {
  left: unset;
  right: 0;
}
.advanced-filter-dropdown__content::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.advanced-filter-dropdown__content::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.advanced-filter-dropdown__content.show {
  display: block;
}
.advanced-filter-dropdown__item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
}
.advanced-filter-dropdown__item:hover {
  background-color: var(--dropdown-hover);
}
.advanced-filter-dropdown__item--name {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  margin-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 17rem;
  display: inline-block;
}
.advanced-filter-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-lite-blue);
  border-radius: 1.6rem 1.6rem 0 0;
}
.advanced-filter-dropdown__header--title {
  display: flex;
  align-items: center;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.advanced-filter-dropdown__actions-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.advanced-filter-dropdown__btn-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 3rem 1.5rem;
  border-right: 1px solid var(--color-lite-blue);
  border-left: 1px solid var(--color-lite-blue);
  flex-wrap: wrap;
  gap: 4rem 0;
}
@media only screen and (max-width: 75em) {
  .advanced-filter-dropdown__btn-area {
    width: 96rem;
  }
}
.advanced-filter-dropdown__item-count {
  right: 2rem;
  top: -0.5rem;
}
.advanced-filter-dropdown__footer {
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-end;
  border-radius: 0px 0px 16px 16px;
  border-right: 1px solid var(--color-lite-blue);
  border-bottom: 1px solid var(--color-lite-blue);
  border-left: 1px solid var(--color-lite-blue);
  background: var(--color-lite-blue);
}

.status-dot {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: block;
  margin-left: 1.6rem;
}
.status-dot.qualified {
  background-color: #455db3;
}
.status-dot.contacted {
  background-color: #4B64BF;
}
.status-dot.new {
  background-color: #0D7C56;
}
.status-dot.proposal {
  background-color: #D6A744;
}
.status-dot.negotiation {
  background-color: #92898A;
}
.status-dot.win {
  background-color: #498144;
}
.status-dot.loss {
  background-color: #B05755;
}
.status-dot.quotation {
  background-color: #ffe08d;
}
.status-dot.overdue {
  background-color: #D72F4D;
}
.status-dot.done {
  background-color: #4B64BF;
}
.status-dot.default {
  background-color: #A5ABC3;
}
.status-dot.active {
  background-color: #0D7C56;
}
.status-dot.inactive {
  background-color: #D72F4D;
}
.status-dot.converted {
  background-color: #8bcb24;
}
.status-dot.authorization {
  background-color: var(--status-loss-border);
}
.status-dot.pending {
  background: var(--pending1-border);
}
.status-dot.revise {
  background: var(--revise-border);
}
.status-dot.revised {
  background: var(--revised-border);
}
.status-dot.expired {
  background: var(--expired-border);
}
.status-dot.draft {
  background: #a34703;
}
.status-dot.accepted {
  background: #8bcb24;
}
.status-dot.rejected {
  background: #b05755;
}
.status-dot.in-progress {
  background-color: var(--status-pending-border);
}
.status-dot.planning {
  background-color: var(--status-qualified-border);
}
.status-dot.completed {
  background-color: var(--status-acive-border);
}
.status-dot.approval {
  background-color: var(--border-approval);
}
.status-dot.sent {
  background-color: var(--sent-bg);
}
.status-dot.rejected-in-approval {
  background-color: var(--status-loss-color);
}
.status-dot.upcoming {
  background-color: var(--status-upcoming-border);
}
.status-dot.not-accepted {
  background: rgba(201, 0, 0, 0.3411764706);
  width: 1.2rem;
  height: 1.2rem;
  padding: unset;
  border-style: none;
}
.status-dot.sent-to-client {
  background: rgba(0, 151, 144, 0.4784313725);
  width: 1.2rem;
  height: 1.2rem;
  padding: unset;
  border-style: none;
}
.status-dot.send-for-approval {
  background: #2424c0;
  width: 1.2rem;
  height: 1.2rem;
  padding: unset;
  border-style: none;
}
.status-dot.approval-rejected {
  background: rgba(255, 0, 0, 0.6705882353);
}
.status-dot.cancelled {
  background-color: var(--cancelled-border-color);
}
.status-dot.failed {
  background-color: var(--failed-border-color);
}
.status-dot.postponed {
  background-color: var(--postponed-border-color);
}

.delete-modal {
  display: none;
}
.delete-modal__content {
  padding: 2rem;
  max-width: 54rem;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.delete-modal__btns {
  margin-top: 2rem;
}
.delete-modal__btn {
  padding: 1rem 2.5rem;
  cursor: pointer;
  margin: 0 0.6rem;
  border-style: none;
  border-radius: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
}
.delete-modal__btn.delete {
  background-color: #D72F4D;
  color: #FFFFFF;
  border: 2px solid #D72F4D;
}
.delete-modal__btn.cancel {
  background-color: var(--white-col);
  color: var(--black-col);
  border: 2px solid #A5ABC3;
}
.delete-modal__btn.submit {
  background-color: #2B449D;
  color: #FFFFFF;
  border: 2px solid #2B449D;
}
.delete-modal__circle {
  background-color: #f8a6b4;
  border: 1rem solid rgba(255, 247, 248, 0.5019607843);
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.delete-modal__circle.submit {
  background-color: #bccaff;
  border: 1rem solid rgba(255, 247, 248, 0.5019607843);
}
.delete-modal__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #D72F4D;
}
.delete-modal__icon.submit {
  stroke: #2B449D;
  width: 1.8rem;
  height: 1.8rem;
}
.delete-modal__title {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--black-col);
  margin-bottom: 0.4rem;
}
.delete-modal__text {
  font-size: 1.5rem;
  color: var(--black-col);
  font-weight: 400;
}

.gauge-chart {
  width: 26rem;
  height: 26rem;
  padding: 2rem;
  border-radius: 50%;
  background: radial-gradient(#fff 0 0) content-box, conic-gradient(from -90deg, #D72F4D 0deg 60deg, white 60deg 60deg, #F0CA57 60deg 120deg, white 120deg 120deg, #4bc86b 120deg, #4bc86b 180deg, #158e3d 180deg, #0a5c32 180deg, #054d2a 180deg, #ffffff 180deg, white 360deg);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 85.37em) {
  .gauge-chart {
    width: 23rem;
    height: 23rem;
  }
}
@media only screen and (max-width: 75em) {
  .gauge-chart {
    width: 35rem;
    height: 35rem;
  }
}
@media only screen and (max-width: 48em) {
  .gauge-chart {
    margin-top: 3rem;
  }
}
.gauge-chart.dark {
  background: radial-gradient(#14181e 0 0) content-box, conic-gradient(from -90deg, #D72F4D 0deg 60deg, #14181e 60deg 60deg, #F0CA57 60deg 120deg, #14181e 120deg 120deg, #4bc86b 120deg, #4bc86b 180deg, #158e3d 180deg, #0a5c32 180deg, #054d2a 180deg, #14181e 180deg, #14181e 360deg);
}
.gauge-chart__value {
  position: absolute;
  bottom: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.gauge-chart__initial-value, .gauge-chart__secondary-value, .gauge-chart__tertiary-value, .gauge-chart__quaternary-value, .gauge-chart__end-value {
  font-size: 1.2rem;
  position: absolute;
  color: var(--lite-font-col);
  z-index: 9999999999999;
}
.gauge-chart__initial-value {
  left: 30px;
  top: 47%;
}
.gauge-chart__secondary-value {
  left: 25%;
  top: 18%;
}
.gauge-chart__tertiary-value {
  right: 25%;
  top: 18%;
}
.gauge-chart__end-value {
  right: 46px;
  top: 78%;
}
.gauge-chart__quaternary-value {
  right: 12%;
  top: 47%;
}
.gauge-chart__pointer {
  position: absolute;
  width: 71%;
  height: 71%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: transparent;
  rotate: calc(var(--score) * 180deg / 100 - 90deg);
  transition: 0.5s ease-in-out;
}
.gauge-chart__pointer::before {
  content: "";
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid var(--black-col);
  position: absolute;
  rotate: 0deg;
  top: -11%;
  left: 50%;
  translate: -50% -50%;
}
.gauge-chart__container {
  height: 14.5rem; /* Half of the gauge-chart height */
  overflow: hidden; /* Hide the lower half */
  position: relative;
  margin-top: 5rem;
}
@media only screen and (max-width: 85.37em) {
  .gauge-chart__container {
    height: 20rem;
  }
}
@media only screen and (max-width: 75em) {
  .gauge-chart__container {
    height: 25rem;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 48em) {
  .gauge-chart__container {
    margin-top: 1rem;
  }
}

.pointer::before {
  content: "";
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #040919;
  position: absolute;
  rotate: 0deg;
  top: -11%;
  left: 50%;
  translate: -50% -50%;
}

.table-date-filter {
  position: relative;
}
.table-date-filter__toggle {
  cursor: pointer;
  border-radius: 4.8rem;
  background-color: transparent;
  border: 1px solid var(--filter-bar-border);
  padding: 0.6rem 1rem;
  color: var(--button-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-right: 0.8rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .table-date-filter__toggle {
    border-radius: 3rem;
    padding: 0.8rem;
  }
}
.table-date-filter__toggle--name {
  margin-right: 0.6rem;
  white-space: nowrap;
}
.table-date-filter__toggle--icon {
  margin-left: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.table-date-filter__menu {
  display: none;
  min-width: 22rem;
  position: absolute;
  top: 115%;
  left: 0;
  z-index: 107;
  border-radius: 1rem;
  border: 1px solid var(--dropdown-border);
  background: var(--table-container);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  max-height: 24rem;
  overflow-y: auto;
}
.table-date-filter__menu.show {
  display: block;
}
.table-date-filter__menu::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.table-date-filter__menu::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.table-date-filter__menu__leads {
  max-height: unset;
}
.table-date-filter__days {
  flex-direction: column;
  align-items: self-start;
  cursor: pointer;
}
.table-date-filter__item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.table-date-filter__item--day {
  display: block;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-date-filter__item--dtls {
  font-size: 1.2rem;
  font-weight: 500;
  display: block;
  color: var(--black-col);
}
.table-date-filter__item:hover {
  background-color: var(--dropdown-hover);
}
.table-date-filter__item .check-icon {
  visibility: hidden;
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.table-date-filter__item input[type=checkbox]:checked + div + .check-icon {
  visibility: visible;
}
.table-date-filter__item input[type=checkbox] {
  display: none;
}
.table-date-filter__item.selected .check-icon {
  visibility: visible;
}
.table-date-filter__custom-date {
  text-align: center;
  border-style: none;
  outline: none;
  width: 100%;
}
.table-date-filter__container .flatpickr-calendar {
  box-shadow: none;
}
.table-date-filter__back-btn {
  cursor: pointer;
  font-size: 1.2rem;
}
.table-date-filter__back-btn:hover {
  color: #2B449D;
}
.table-date-filter__back-btn:hover svg {
  fill: #2B449D;
}
.table-date-filter__clear-btn {
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.2rem;
}
.table-date-filter__clear-btn:hover {
  color: #2B449D;
}
.table-date-filter__list-menu {
  max-height: 30rem;
  overflow-y: auto;
}
.table-date-filter__list-menu::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.table-date-filter__list-menu::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.table-date-filter__custom-date {
  text-align: center;
  border-style: none;
  outline: none;
  width: 100%;
  background: transparent;
  color: var(--black-col);
}
.table-date-filter__disable .table-date-filter__item {
  opacity: 0.3;
  pointer-events: none;
}

.custom-checkboxes {
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
}
.custom-checkboxes.editable {
  pointer-events: all;
  cursor: pointer !important;
}
.custom-checkboxes__div {
  margin-right: 1.2rem;
  margin-bottom: 0.6rem;
}
.custom-checkboxes__div input.editable {
  cursor: pointer !important;
}
.custom-checkboxes__text {
  font-size: 1.4rem;
  font-weight: 500;
  margin-left: 0.4rem;
  color: var(--color-black);
}

.custom-details-select {
  position: relative;
  width: 100%;
  pointer-events: none;
}
.custom-details-select.editable {
  pointer-events: all;
}
.custom-details-select.editable .custom-details-select__icon {
  display: block;
}
.custom-details-select__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  padding: 0.5rem 2px;
  color: var(--black-col);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  cursor: pointer;
}
.custom-details-select__selected.active .custom-details-select__icon {
  transform: rotate(180deg);
}
.custom-details-select__options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--card-color);
  z-index: 99;
  border-radius: 0.4rem;
  padding: 0.2rem;
}
.custom-details-select__options.show {
  display: block;
}
.custom-details-select__option {
  padding: 10px;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  border-radius: 0.4rem;
}
.custom-details-select__option:hover {
  background-color: var(--select-hover);
}
.custom-details-select__option.selected {
  background-color: var(--custom-selected-bg);
  font-weight: 600;
}
.custom-details-select__icon {
  width: 2.4rem;
  height: 1.8rem;
  stroke: var(--black-col);
  transition: transform 0.3s;
  display: none;
}

.website-share {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-style: none;
  background-color: transparent;
}
.website-share input {
  color: var(--head-primary-color);
  width: fit-content;
}
.website-share__editable {
  cursor: text;
  background-color: transparent;
}
.website-share--icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: #2B449D;
  cursor: pointer;
}

a.Web-width.website-share {
  width: 100%;
}

.extra-alert {
  /*    position: absolute;
  right: -2.3rem;
  top: -.3rem;*/
  display: inline;
  margin: 0 0.5rem;
}
.extra-alert.user-primary-alert {
  position: absolute;
  right: 0rem;
  top: 0rem;
  background-color: transparent;
}
.extra-alert.user-primary-alert .extra-alert__icon {
  width: 1.8rem;
  height: 1.8rem;
  cursor: default;
}
.extra-alert.key-details-box-alert {
  position: absolute;
  right: 1px;
  top: -1rem;
}
.extra-alert.key-details-box-alert .extra-alert__icon {
  fill: var(--extra-alert);
  width: 1.4rem;
  height: 1.4rem;
  cursor: default;
}
.extra-alert__icon {
  fill: var(--extra-alert);
  width: 1.6rem;
  height: 1.6rem;
}
.extra-alert.decision-maker {
  position: absolute;
  right: -5rem;
  top: 0;
}

.flatpickr-calendar {
  background-color: var(--card-color);
  color: var(--black-col);
}

.flatpickr-day {
  color: var(--black-col);
}

.flatpickr-months .flatpickr-month {
  color: var(--black-col);
}

span.flatpickr-weekday {
  color: var(--flatpickr-week);
}

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  fill: var(--black-col);
}

.flatpickr-day.prevMonthDay {
  color: var(--flatpickr-lastmonth-day);
}

.flatpickr-day.inRange {
  -webkit-box-shadow: -5px 0 0 var(--flatpickr-day-bg), 5px 0 0 var(--flatpickr-day-bg);
  box-shadow: -5px 0 0 var(--flatpickr-day-bg), 5px 0 0 var(--flatpickr-day-bg);
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange {
  background: var(--flatpickr-day-bg);
  border-color: var(--flatpickr-day-bg);
}

.flatpickr-day.today, .flatpickr-day.today.inRange:hover {
  background: var(--flatpickr-hover);
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  background: var(--flatpickr-hover);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--card-color);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--flatpickr-year-change);
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--flatpickr-year-change);
}

.numInputWrapper span {
  border: 1px solid var(--flatpickr-year-change-border);
}

.flatpickr-day.today.inRange {
  background: #307edf !important;
}

.flatpickr-time input {
  color: var(--black-col);
}

.flatpickr-time input:hover {
  background: var(--card-color);
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background-color: transparent !important;
}

.numInputWrapper:hover {
  background-color: transparent !important;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  color: var(--black-col);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--black-col);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--black-col);
}

.website-share {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-style: none;
  background-color: transparent;
}
.website-share input {
  color: var(--head-primary-color);
  width: fit-content;
}
.website-share__editable {
  cursor: text;
  background-color: transparent;
}
.website-share--icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: #2B449D;
  cursor: pointer;
}

a.Web-width.website-share {
  width: 100%;
}

.terms-and-conditions {
  position: relative;
  background-color: var(--whie-col);
  border: 1px solid #E5E8F2;
  border-radius: 1.8rem;
  padding: 1.6rem 1.6rem;
  margin-top: 5rem;
}
.terms-and-conditions p {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  margin: 0.6rem 0 2rem 0;
}
.terms-and-conditions__textarea {
  width: 100%;
  border-style: none;
  background-color: transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  pointer-events: none;
  outline: none;
  resize: none;
  box-sizing: border-box;
  color: var(--black-col);
  height: fit-content;
}
.terms-and-conditions__textarea.edit-mode {
  pointer-events: all;
  border-bottom: 1px solid var(--black-col);
}
.terms-and-conditions__save-btn {
  display: flex;
}
.terms-and-conditions__edit-btn {
  position: absolute;
  right: 0rem;
  top: -6rem;
}

.check-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}
.check-dropdown.editable {
  border-bottom: 1px solid var(--black-col);
}
.check-dropdown__button {
  padding: 10px 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  text-align: left;
  width: 100%;
}
.check-dropdown__menu {
  display: none;
  position: absolute;
  background-color: var(--white-col);
  width: 250px;
  z-index: 1000;
}
.check-dropdown__menu.open {
  display: block;
}
.check-dropdown__item {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: start;
  cursor: pointer;
  position: relative;
}
.check-dropdown__item:hover {
  background-color: #f0f0f0;
}
.check-dropdown__item--text {
  font-size: 1.4rem;
  font-weight: 500;
}
.check-dropdown__item .check-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: #000;
  display: none;
}
.check-dropdown__item.selected .check-icon {
  display: block;
}

.extra-alert {
  /*    position: absolute;
  right: -2.3rem;
  top: -.3rem;*/
  display: inline;
  margin: 0 0.5rem;
}
.extra-alert.user-primary-alert {
  position: absolute;
  right: 0rem;
  top: 0rem;
  background-color: transparent;
}
.extra-alert.user-primary-alert .extra-alert__icon {
  width: 1.8rem;
  height: 1.8rem;
  cursor: default;
}
.extra-alert.key-details-box-alert {
  position: absolute;
  right: 1px;
  top: -1rem;
}
.extra-alert.key-details-box-alert .extra-alert__icon {
  fill: var(--extra-alert);
  width: 1.4rem;
  height: 1.4rem;
  cursor: default;
}
.extra-alert__icon {
  fill: var(--extra-alert);
  width: 1.6rem;
  height: 1.6rem;
}
.extra-alert.decision-maker {
  position: absolute;
  right: -5rem;
  top: 0;
}

.quotation-select-dropdown {
  position: relative;
  margin: 2rem;
}
.quotation-select-dropdown__icon {
  width: 2.4rem;
  height: 1.8rem;
  stroke: var(--black-col);
}
.quotation-select-dropdown__select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #A5ABC3;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.quotation-select-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  border-radius: 1rem;
  background-color: var(--card-color);
  z-index: 1000;
  box-shadow: 0px 4px 10px 0px rgba(13, 15, 18, 0.15);
  height: 30rem;
  overflow-y: auto;
}
.quotation-select-dropdown__menu.show {
  display: block;
}
.quotation-select-dropdown__menu::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.quotation-select-dropdown__menu::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.quotation-select-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quotation-select-dropdown__list--item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.quotation-select-dropdown__list--item:hover {
  background: var(--select-hover);
}
.quotation-select-dropdown__avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  background-color: blue;
}
.quotation-select-dropdown__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.quotation-select-dropdown__info {
  display: flex;
  flex-direction: column;
}
.quotation-select-dropdown__info--name {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.quotation-select-dropdown__info--details {
  display: flex;
  align-items: center;
  color: var(--black-col);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  word-break: break-word;
}
.quotation-select-dropdown__info--email {
  color: #555B6C;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.editable-input {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  border-style: none;
  outline: none;
  background-color: transparent;
  -moz-appearance: textfield;
}
.editable-input__box {
  border: 1px solid transparent;
  border-radius: 0.8rem;
  padding: 0.7rem 1.2rem 0.7rem 0.7rem;
  pointer-events: none;
}
.editable-input__box.edit-mode {
  pointer-events: all;
  border: 1px solid #A5ABC3;
}

.progress-bar-popup {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 4rem);
}
.progress-bar-popup__content {
  background-color: var(--card-color);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  text-align: center;
  position: relative;
  min-width: 12rem;
}
.progress-bar-popup__icon {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--black-col);
  margin-right: 0.4rem;
}
.progress-bar-popup__icon.cancel--icon {
  width: 1rem;
  height: 1rem;
}
.progress-bar-popup__btns {
  color: var(--black-col);
  border-style: none;
  border-radius: 0.8rem;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.progress-bar-popup__btns.win {
  background-color: #A0CC16;
}
.progress-bar-popup__btns.loss {
  background-color: #D72F4D;
}

.sml-alert-box {
  display: inline-flex;
  height: 3rem;
  padding: 0 1.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 1.8rem;
  margin: 0.8rem 0 1.2rem;
}
.sml-alert-box__text {
  color: #FFFFFF;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}
.sml-alert-box__icon {
  stroke: #FFFFFF;
  width: 1.4rem;
  height: 1.4rem;
}
.sml-alert-box.expired {
  background-color: #CE6A22;
}
.sml-alert-box.rejected {
  background-color: #D72F4D;
}
.sml-alert-box.rejected .sml-alert-box__icon {
  stroke: #FFFFFF;
  width: 1rem;
  height: 1rem;
}
.sml-alert-box.accepted {
  background-color: #108E63;
}
.sml-alert-box.planning {
  background-color: #4B64BF;
}
.sml-alert-box.in-progress {
  background-color: #D19F1F;
}
.sml-alert-box.in-progress .sml-alert-box__icon {
  stroke: #FFFFFF;
  width: 1.6rem;
  height: 1.6rem;
}

.custom-column-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}
.custom-column-toggle input {
  display: none;
}
.custom-column-toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}
.custom-column-toggle__slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
.custom-column-toggle input:checked + .custom-column-toggle__slider {
  background-color: #2B449D;
}
.custom-column-toggle input:checked + .custom-column-toggle__slider:before {
  transform: translateX(14px);
}

.custom-column-modal {
  right: 2rem;
  top: 5.5rem;
  min-height: unset;
}
@media only screen and (max-width: 37.5em) {
  .custom-column-modal {
    top: 4rem;
  }
}
.custom-column-modal__fields {
  min-height: calc(100vh - 37rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 7rem;
  height: calc(100vh - 37rem);
  overflow-y: scroll;
}
@media only screen and (max-width: 37.5em) {
  .custom-column-modal__fields {
    grid-template-columns: 1fr;
    min-width: 30rem;
  }
}
.custom-column-modal__fields::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.custom-column-modal__fields::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.custom-column-modal__sm-head {
  color: #2B449D;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
}
.custom-column-modal__selected {
  padding: 2rem;
  border-right: 1px solid var(--modal-border);
}
.custom-column-modal__options {
  padding: 2rem;
}
.custom-column-modal__options--list {
  list-style: none;
}
.custom-column-modal__option {
  padding: 0.8rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-column-modal__option--text {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.custom-column-modal__clear-btn {
  color: var(--black-col);
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration-line: underline;
  border-style: none;
  background-color: transparent;
  cursor: pointer;
}
.custom-column-modal__draggable--list {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--dashboard-border);
  background: var(--draggable-list-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0.6rem;
  cursor: grab;
}
.custom-column-modal__draggable--cancel {
  width: 1rem;
  height: 1rem;
  stroke: var(--black-col);
}
.custom-column-modal__draggable--cancel-btn {
  border-style: none;
  background-color: transparent;
  cursor: pointer;
}
.custom-column-modal__draggable--icon {
  margin-right: 0.8rem;
  cursor: pointer;
}

.campagin-avatars__container {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 25rem;
}
.campagin-avatars__avatar {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 2px solid var(--card-color);
  object-fit: cover;
  margin-left: -1rem;
  transition: all 0.3s ease;
}
.campagin-avatars__avatar.hidden {
  display: none;
}
.campagin-avatars__toggle {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: var(--avatar-toggle);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: -1rem;
  transition: all 0.3s ease;
  color: var(--color-black);
  border-style: none;
}

.add-participatnts {
  position: absolute;
  right: 0;
  top: 5px;
  margin-top: 1rem;
  display: none;
}
.add-participatnts__btn {
  width: 3rem;
  height: 3rem;
  background-color: var(--avatar-toggle);
  border-style: none;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.add-participatnts__btn--icon {
  width: 0.8rem;
  height: 0.8rem;
  stroke: var(--black-col);
}
.add-participatnts__dropdown {
  display: none;
  width: 22rem;
  position: absolute;
  top: 115%;
  right: 0;
  z-index: 1000;
  border-radius: 1rem;
  border: 1px solid var(--dropdown-border);
  background: var(--table-container);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  max-height: 24rem;
  overflow-y: auto;
}
.add-participatnts__dropdown--item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.add-participatnts__dropdown--img {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  margin-left: 1rem;
}
.add-participatnts__dropdown--text {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  margin-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 17rem;
  display: inline-block;
}
.add-participatnts__dropdown::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.add-participatnts__dropdown::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.add-participatnts.edit-mode {
  display: block;
}

.campaign-multiselect .choices {
  margin-bottom: 0;
}
.campaign-multiselect .choices__inner {
  min-height: unset;
  padding: 0;
  background-color: transparent;
  border-style: none;
}
.campaign-multiselect .choices__list--multiple .choices__item {
  background-color: var(--details-table-border);
  border: none;
  border-radius: 16px;
  color: var(--color-black);
  padding: 0.4rem 1rem;
  border: 1px solid var(--button-border);
}
.campaign-multiselect .choices__list--multiple .choices__item.is-highlighted {
  background-color: #f0f0f0;
  border: none;
}
.campaign-multiselect .choices[data-type*=select-multiple] .choices__button {
  border-left: none;
  padding-left: 4px;
  color: #666;
}
.campaign-multiselect .choices[data-type*=select-multiple] .choices__button::before {
  content: "";
  position: absolute;
}
.campaign-multiselect .choices__list--dropdown, .campaign-multiselect .choices__list[aria-expanded] {
  border-radius: 1rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  box-shadow: 0px 5px 10px 0px rgba(67, 70, 75, 0.15);
  width: 22rem;
}
.campaign-multiselect .choices[data-type*=select-multiple] .choices__button {
  background-image: url("../../images/icons/cross-icon-sm.svg");
}
.campaign-multiselect .choices__list--dropdown .choices__item--selectable.is-highlighted, .campaign-multiselect .choices__list[aria-expanded] .choices__item--selectable.is-highlighted:hover {
  background-color: var(--dropdown-hover);
}

.secondary-table {
  padding-bottom: 4rem;
}
.secondary-table .main-table__head {
  padding: 1.6rem;
  border-bottom: 1px solid var(--details-table-border);
}
.secondary-table .main-table__head span {
  color: var(--head-primary-color);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  text-align: left;
}
.secondary-table td {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  padding: 1.3rem 1.6rem;
  border-style: none;
}
.secondary-table__delete-btn {
  border-style: none;
  background-color: transparent;
  cursor: pointer;
}
.secondary-table__delete-btn--icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--black-col);
}
.secondary-table .table-horizontal-scroll {
  min-height: unset;
}
.secondary-table .main-table__sortBtn svg {
  fill: #738fe5;
}

.dashboard-datepicker-container__calendar {
  display: none;
}
.dashboard-datepicker-container.show-calendar {
  max-height: unset;
  overflow-y: hidden;
  width: unset;
}
.dashboard-datepicker-container.show-calendar .dashboard-datepicker-container__calendar {
  display: block;
}
.dashboard-datepicker-container.show-calendar .dashboard-datepicker-container__list {
  display: none;
}

.notification-loader {
  position: relative;
  width: 100px;
  height: 16px;
}
.notification-loader::before, .notification-loader::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  left: 0;
  top: 0;
}
.notification-loader::before {
  box-shadow: 32px 0 #000;
  animation: ballMoveX 1s linear infinite;
}
.notification-loader::after {
  box-shadow: none;
  transform-origin: 40px 0;
  transform: rotate(-153deg);
  animation: rotateLoader 1s linear infinite;
}
.notification-loader__container {
  display: none;
  justify-content: center;
  align-items: center;
}

@keyframes rotateLoader {
  0%, 10% {
    transform: rotate(-153deg);
  }
  90%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes ballMoveX {
  0%, 10% {
    transform: translateX(0);
  }
  90%, 100% {
    transform: translateX(16px);
  }
}
.details-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: var(--blur-loader);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 108;
}
.details-loader__loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--primary-col);
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  animation: spin 1s linear infinite;
}

/* Spin animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.add-new-btn {
  color: var(--add-new-btn-color);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  padding: 1rem;
  font-size: 1.4rem;
  font-style: normal;
  white-space: nowrap;
}
.add-new-btn__icon {
  margin-right: 0.6rem;
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--add-new-btn-color);
}
.add-new-btn:hover {
  background-color: var(--select-hover);
}

.subscription-banner {
  color: #FFFFFF;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  width: 100%;
  z-index: 1110;
  transition: 0.5s ease all;
  /*
  &.expire {
      background-color: $color-primary;
  }
     &.expired {
      background: #FF3737;
  }

  &.discount {
      background: #BEA200;
  }*/
}
.subscription-banner.expire {
  background: linear-gradient(to right, #ff4b1f, #ff9068);
}
.subscription-banner.expired {
  background: linear-gradient(to right, #d31027, #ea384d);
}
.subscription-banner.discount {
  background: linear-gradient(to right, #4e54c8, #8f94fb);
}
.subscription-banner__btn {
  padding: 0.8rem 1.6rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  border-radius: 4rem;
  background: #F6F6F6;
  color: #000;
  cursor: pointer;
  margin-left: 2rem;
  transition: 0.3s ease-in-out transform;
}
.subscription-banner__btn:hover {
  transform: translateY(-2px);
}
.subscription-banner__close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  stroke: #FFFFFF;
  cursor: pointer;
  width: 1.6rem;
  height: 1.6rem;
}
.subscription-banner.close {
  transform: translateY(-70px);
  opacity: 0;
}
.subscription-banner.no-banners {
  display: none;
}

.container.banners {
  margin-top: 6rem;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}
.custom-dropdown.sm-dropdown {
  width: 7rem;
}
.custom-dropdown__selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  border-bottom: 1px solid var(--custom-input-border);
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  padding-bottom: 0.4rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-dropdown__selected--active .custom-dropdown__icon {
  transform: rotate(180deg);
}
.custom-dropdown__icon {
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
  margin-left: auto;
}
.custom-dropdown__icon--priority {
  width: 2rem;
  height: unset;
  margin-right: 0.6rem;
}
.custom-dropdown__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  border-radius: 1rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  max-height: 24rem;
  overflow-y: auto;
}
.custom-dropdown__options--hidden {
  display: none;
}
.custom-dropdown__options::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.custom-dropdown__options::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.custom-dropdown__option {
  padding: 1rem 1.2rem;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-dropdown__option span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.custom-dropdown__option:hover {
  background-color: var(--dropdown-hover);
}
.custom-dropdown__selected span {
  color: #7C849C;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-dropdown__selected[data-value] span {
  color: var(--black-col);
}
.custom-dropdown__search {
  padding: 0.8rem 1.5rem 0;
  display: flex;
  align-items: center;
}
.custom-dropdown__search input {
  width: 100%;
  padding: 0.6rem 0.6rem 0.6rem 0;
  font-size: 1.4rem;
  border-style: none;
  outline: none;
  background-color: transparent;
  color: var(--black-col);
}
.custom-dropdown__search input::placeholder {
  color: #7C849C;
}
.custom-dropdown__message {
  text-align: center;
  font-size: 1.2rem;
  padding: 3rem 1rem;
}

.custom-field-alert {
  display: inline;
  cursor: pointer;
  visibility: hidden;
}
.custom-field-alert__icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: #2B449D;
  transform: rotate(180deg);
}
.custom-field-alert__tooltip {
  visibility: hidden;
  white-space: nowrap;
  width: fit-content;
  background-color: #333;
  font-size: 10px;
  color: #fff;
  text-align: center;
  border-radius: 7px;
  padding: 5px 8px;
  position: absolute;
  z-index: 1001;
  bottom: -3rem;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.custom-field-alert__tooltip.show {
  visibility: visible;
  opacity: 1;
}

.custom-dropdown-one {
  position: relative;
  width: 100%;
}
.custom-dropdown-one.sm-dropdown {
  width: 7rem;
}
.custom-dropdown-one__selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  border-bottom: 1px solid var(--custom-input-border);
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-weight: 500;
  padding-bottom: 0.4rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-dropdown-one__selected--active .custom-dropdown-one__icon {
  transform: rotate(180deg);
}
.custom-dropdown-one__selected span {
  color: #7C849C;
  display: flex;
  align-items: center;
}
.custom-dropdown-one__selected[data-value] span {
  color: var(--black-col);
}
.custom-dropdown-one__icon {
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
  margin-left: auto;
}
.custom-dropdown-one__icon--priority {
  width: 2rem;
  height: unset;
  margin-right: 0.6rem;
}
.custom-dropdown-one__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  border-radius: 1rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
  max-height: 24rem;
  overflow-y: auto;
}
.custom-dropdown-one__options--hidden {
  display: none;
}
.custom-dropdown-one__options::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: #D9D9D9;
  border-radius: 1.5rem;
}
.custom-dropdown-one__options::-webkit-scrollbar-thumb {
  background: #949494;
  border-radius: 1.5rem;
}
.custom-dropdown-one__option {
  padding: 1rem 1.2rem;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-dropdown-one__option:hover {
  background-color: var(--dropdown-hover);
}
.custom-dropdown-one__search {
  padding: 0.8rem 1.5rem 0;
  display: flex;
  align-items: center;
}
.custom-dropdown-one__search input {
  width: 100%;
  padding: 0.6rem 0.6rem 0.6rem 0;
  font-size: 1.4rem;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--black-col);
}
.custom-dropdown-one__search input::placeholder {
  color: #7C849C;
}

.financial-year-container {
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--table-container);
  border: 1px solid var(--table-border);
  margin-top: 0.8rem;
  border-radius: 1.8rem;
}
.financial-year-container__scroll {
  overflow-x: auto;
  min-height: calc(100vh - 23rem);
  position: relative;
}
.financial-year-container__table {
  width: 100%;
  border-collapse: collapse;
}
.financial-year-container__table tr {
  border-bottom: 1px solid var(--table-border-lte);
}
.financial-year-container__table--head {
  background: var(--table-head);
}
.financial-year-container__table th {
  padding: 1.6rem 1rem;
  color: var(--table-data-col);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  text-align: left;
}
.financial-year-container__table th.financial-year-container__number {
  text-align: right;
}
.financial-year-container__table td {
  padding: 1.6rem 1rem;
  color: var(--table-data-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
}
.financial-year-container__expandable-row {
  cursor: pointer;
  transition: background-color 0.2s;
}
.financial-year-container__row-btn {
  cursor: pointer;
  padding: 6px 8px;
  border-style: none;
  background-color: transparent;
}
.financial-year-container__row-btn--icons {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.financial-year-container__number {
  text-align: right;
}
.financial-year-container__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
}
.financial-year-container__expand-content {
  display: none;
}
.financial-year-container__expand-content--text {
  color: var(--table-data-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
}
.financial-year-container__expand-content--text.head {
  margin-left: 3rem;
}
.financial-year-container__expand-content.show {
  display: table-row;
}
.financial-year-container__expand-icon {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  transition: transform 0.2s;
  margin-right: 8px;
}
.financial-year-container__expand-icon.expanded {
  transform: rotate(90deg);
}

.division-wise-target__head {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.division-wise-target__box {
  display: none;
  margin-top: 1.6rem;
  overflow-y: auto;
  height: calc(100vh - 41rem);
}
.division-wise-target__box.show {
  display: block;
}
.division-wise-target__box:focus-visible {
  outline: none;
}
.division-wise-target :focus {
  outline: none;
}

.settings-search-box {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--button-border);
  width: 36rem;
  padding: 0.8rem 1rem;
  margin-right: 2rem;
}
.settings-search-box__input {
  border-style: none;
  background-color: transparent;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  width: 100%;
  outline: none;
  color: var(--black-col);
}
.settings-search-box__input::placeholder {
  color: #7C849C;
}
@media only screen and (max-width: 64em) {
  .settings-search-box {
    width: 32rem;
  }
}
@media only screen and (max-width: 48em) {
  .settings-search-box {
    gap: 1rem;
  }
}

.user-img-upload__container {
  position: relative;
  width: 115px;
  height: 115px;
}
.user-img-upload__preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--background-col);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #dcdcdc;
}
.user-img-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-img-upload__btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  background-color: var(--background-col);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #dcdcdc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-img-upload__btn--icon {
  width: 20px;
  height: 20px;
  stroke: var(--black-col);
  fill: var(--black-col);
}

.history-report__table--row {
  border-bottom: 1px solid var(--details-table-border);
  padding-bottom: 1.2rem;
  padding-top: 1.2rem;
}
.history-report__user {
  display: flex;
  align-items: center;
}
.history-report__user--icon {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-style: none;
  background-color: #DFAA84;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--black-col);
  font-size: 1.4rem;
  font-weight: 700;
  margin-right: 0.8rem;
}
.history-report__user--icon.has-image {
  background-color: transparent !important;
  color: transparent;
}
.history-report__user--icon img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.history-report__user--name {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
}
.history-report__user--details {
  /*color: var(--black-col);*/
  color: #787878;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  margin-left: 1.5rem;
}
.history-report__flow {
  color: var(--black-col);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  word-break: break-all;
  /* overflow: hidden;*/
  /*white-space: nowrap;*/
  /* text-overflow: ellipsis;*/
  /*max-width: 28rem;*/
  /*        @include respond(medium-laptop) {
      max-width: 24rem;
  }

  @include respond(tab-land) {
      max-width: 20rem;
  }

  @include respond(tab-medium) {
      max-width: 16rem;
  }

  @include respond(phone-land) {
      max-width: 10rem;
  }*/
}
.history-report__flow:first-child {
  margin-left: 4rem;
}
.history-report__flow--icon {
  width: 2rem;
  height: 1rem;
  stroke: var(--black-col);
}
.history-report__flow--container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.history-report__flow--date {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
@media only screen and (max-width: 37.5em) {
  .history-report__flow--date {
    margin-left: 4rem;
  }
}
.history-report__bottom--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .history-report__bottom--row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.kanban__board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 48em) {
  .kanban__board {
    gap: 1rem;
  }
}
.kanban__board::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.kanban__board::-webkit-scrollbar-track {
  background: rgb(221, 221, 221);
  border-radius: 7px;
}
.kanban__board::-webkit-scrollbar-thumb {
  background: rgb(177, 177, 177);
  border-radius: 7px;
}
.kanban__board::-webkit-scrollbar-thumb:hover {
  background: #626c71;
}
.kanban__column {
  border-radius: 18px;
  background: rgba(165, 171, 195, 0.1);
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 48em) {
  .kanban__column {
    flex: 0 0 280px;
  }
}

.column__header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 2rem 2rem 0;
}
.column__header-top {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}
.column__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-black);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 130%;
}
.column__count {
  border-radius: 3.5rem;
  background: var(--kanban-column-count);
  color: var(--black-col);
  font-size: 1.3rem;
  font-weight: 600;
  /*    width: 2.2rem;
      height: 2rem;*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0.8rem;
}

.cards__container {
  padding: 0rem 2rem;
  overflow-y: auto;
  height: calc(100vh - 200px);
}
@media only screen and (max-width: 48em) {
  .cards__container {
    padding: 0rem 1rem;
  }
}
.cards__container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.cards__container::-webkit-scrollbar-track {
  background: rgb(221, 221, 221);
  border-radius: 7px;
}
.cards__container::-webkit-scrollbar-thumb {
  background: rgb(177, 177, 177);
  border-radius: 7px;
}
.cards__container::-webkit-scrollbar-thumb:hover {
  background: #626c71;
}

.deal-card {
  background-color: var(--kanban-card-bg);
  border: 1px solid rgba(94, 82, 64, 0.1215686275);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  cursor: grab;
  overflow: hidden;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  min-width: 24rem;
  margin-bottom: 0.4rem;
}
.deal-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 3px;
  height: 20px;
}
.deal-card:hover {
  transform: translateY(-2px);
}
.deal-card:active {
  cursor: grabbing;
}
.deal-card--red::before {
  background-color: red;
}
.deal-card--blue::before {
  background-color: blue;
}
.deal-card--green::before {
  background-color: green;
}
.deal-card__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}
.deal-card__company {
  color: var(--black-col);
  font-size: 15px;
  font-weight: 500;
  width: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deal-card__contact {
  color: #555B6C;
  font-size: 13px;
  font-weight: 500;
  width: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deal-card__avatar {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-right: 4px;
}
.deal-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.deal-card__service {
  border-radius: 13px;
  border: 1px solid #A5ABC3;
  background: var(--kanban-card-service);
  padding: 0.6rem 1rem;
  margin-bottom: 12px;
  font-size: 1.4rem;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 24rem;
  text-overflow: ellipsis;
}
.deal-card__metadata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 10px;
  position: relative;
}
.deal-card__metadata::after {
  position: absolute;
  bottom: -1rem;
  left: -2.5rem;
  content: "";
  width: 150%;
  height: 1px;
  background-color: var(--filter-bar-border);
}
.deal-card__days, .deal-card__expected {
  display: flex;
  flex-direction: column;
}
.deal-card__days-label, .deal-card__expected-label {
  color: #555B6C;
  font-size: 13px;
  font-weight: 600;
}
.deal-card__days-date, .deal-card__expected-date {
  color: var(--black-col);
  font-size: 14px;
  font-weight: 500;
}
.deal-card__amount {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--black-col);
}
.deal-card__footer {
  padding: 1.4rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.deal-card__footer-users {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.deal-card__footer-user-img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  border-radius: 50%;
}

.sortable-ghost {
  opacity: 0.4;
}

.sortable-drag {
  opacity: 0.8;
  transform: rotate(3deg);
}

/*@import "component/crm-tab-navigation";*/
.feedback-rating {
  border-radius: 0.6rem;
  padding: 1.5rem;
}
.feedback-rating__head {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  text-align: center;
}
.feedback-rating__star-rating {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  margin: 0.3rem 0 0;
}
.feedback-rating__star {
  font-size: 3rem;
  color: #ddd;
  cursor: pointer;
}
.feedback-rating__star.filled {
  color: #f5c518;
}

.global-search {
  position: relative;
  /* Animation */
  /*@keyframes fadeInUp {
      0% {
          opacity: 0;
          transform: translateY(10px) scale(0.98);
      }

      100% {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }*/
  /* Fade-in + scale */
  /*.fade-in {
      animation: fadeInUp 0.4s ease-out;
  }*/
  /* Container */
  /* Icon */
  /*.search-prompt__icon {
      font-size: 28px;
      margin-bottom: 12px;
      animation: pulse 1.5s infinite;
      color: #999;
  }

  @keyframes pulse {
      0%, 100% {
          transform: scale(1);
          opacity: 0.6;
      }

      50% {
          transform: scale(1.2);
          opacity: 1;
      }
  }*/
  /* Text styles */
  /*.search-prompt--text {
      font-size: 16px;
      line-height: 1.5;
      color: #555;
      max-width: 320px;
  }*/
  /* Container */
  /* Icon */
  /* Text styles */
  /* Strong highlight */
}
.global-search__results {
  position: absolute;
  top: 4.8rem;
  left: 0;
  width: 54rem;
  background-color: var(--modal-bg);
  border-radius: 1.8rem;
  box-shadow: 0px 6px 37.3px 0px rgba(4, 9, 25, 0.25);
  overflow: hidden;
  padding: 0.7rem;
  opacity: 0;
  display: none;
  transform: translateY(-20px);
  transition: all 0.4s ease;
  z-index: 11111;
}
.global-search__results.active {
  opacity: 1;
  display: block;
  transform: translateY(0);
  pointer-events: all;
}
@media only screen and (max-width: 37.5em) {
  .global-search__results {
    width: 42rem;
  }
}
@media only screen and (max-width: 23.4em) {
  .global-search__results {
    width: 38rem;
  }
}
.global-search__head {
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--modal-border);
  position: relative;
  background-color: var(--modal-head);
  border-radius: 1.5rem 1.5rem 0 0;
}
.global-search__head.gs-border {
  border: 1px solid var(--modal-border);
}
.global-search__tab {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  border-style: none;
  background-color: transparent;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid transparent;
  position: relative;
  cursor: pointer;
  margin-right: 1.6rem;
}
.global-search__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: var(--user-filter-active);
  height: 2px;
  display: block;
  transition: 0.4s ease-in-out all;
}
.global-search__tab--badge {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  border-style: none;
  background-color: transparent;
}
.global-search__tab.active {
  color: var(--user-filter-active);
}
.global-search__tab.active::after {
  width: 100%;
}
.global-search__body {
  position: relative;
  border: 1px solid var(--modal-border);
  height: 64rem;
  border-top: none;
  padding: 0 2rem;
  overflow-y: auto;
}
.global-search__body::-webkit-scrollbar {
  width: 1rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.global-search__body::-webkit-scrollbar-track {
  background-color: #DEE3F1;
  border-radius: 1rem;
}
.global-search__body::-webkit-scrollbar-thumb {
  background-color: #FFF;
  border-radius: 1rem;
}
@media only screen and (max-width: 90em) {
  .global-search__body {
    height: 54rem;
  }
}
.global-search__tab--content {
  display: none;
  height: 100%;
}
.global-search__tab--content.active {
  display: block;
}
.global-search__item {
  padding: 1.4rem 0;
  border-bottom: 2px solid var(--g-search-border);
  cursor: pointer;
}
.global-search__item--right-top {
  display: flex;
  align-items: center;
}
.global-search__item--img-div {
  position: relative;
}
.global-search__item--img-div--img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  overflow: hidden;
}
.global-search__item--img-div--priority {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  bottom: 5px;
  right: -4px;
  border-radius: 50%;
  border: 1px solid var(--white-col);
}
.global-search__item--main-details {
  margin-left: 1rem;
}
.global-search__item--name {
  color: var(--black-col);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
}
.global-search__item--sub-name {
  color: var(--g-search-text);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}
.global-search__item--text {
  color: var(--g-search-text);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}
.global-search__item--text.quotation-number {
  width: 15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search__item--date {
  color: var(--g-search-text);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}
.global-search__item--date--icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--g-search-icon);
}
.global-search__item--campaign-icon {
  width: 2.2rem;
}
.global-search__item--campaign-speaker {
  width: 2rem;
  height: 2.5rem;
  stroke: var(--black-col);
}
.global-search__status {
  padding: 0.3rem 1rem;
  text-align: center;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.global-search__status.approval {
  border-radius: 1.6rem;
  border: 1px solid #87D5A6;
  background: #ECFDF3;
  color: #067647;
}
.global-search__status.draft {
  border-radius: 1.6rem;
  border: 1px solid #753DBB;
  background: #EEE3FB;
  color: #753DBB;
}
.global-search__status.planning {
  border-radius: 1.6rem;
  border: 1px solid #4B64BF;
  background: #E8EDFF;
  color: #040919;
}
.global-search__status.inprogress {
  border-radius: 1.6rem;
  border: 1px solid #CE6A22;
  background: #FBEEE3;
  color: #040919;
}
.global-search__status.completed {
  border-radius: 1.6rem;
  border: 1px solid #0D7C56;
  background: #DEF1EA;
  color: #040919;
}
.global-search__status.new {
  border-radius: 1.6rem;
  border: 1px solid #87D5A6;
  background: #ECFDF3;
  color: #067647;
}
.global-search__status.qualified {
  border-radius: 1.6rem;
  border: 1px solid #753DBB;
  background: #EEE3FB;
  color: #753DBB;
}
.global-search__status.proposal {
  border-radius: 1.6rem;
  border: 1px solid #CE6A22;
  background: #FBEEE3;
  color: #CE6A22;
}
.global-search__status.pending {
  border-radius: 1.6rem;
  border: 1px solid #4B64BF;
  background: #E8EDFF;
  color: #040919;
}
.global-search__status.negotiation {
  border-radius: 1.6rem;
  border: 1px solid #4B64BF;
  background: #E8EACF;
  color: #040919;
}
.global-search__status.rejected {
  border-radius: 1.6rem;
  border: 1px solid #bd2522;
  background: rgba(189, 37, 34, 0.2901960784);
  color: #040919;
}
.global-search__status.sent {
  border-radius: 1.6rem;
  border: 1px solid #4b60ac;
  background: rgba(75, 96, 172, 0.3098039216);
  color: #4b60ac;
}
.global-search__status.accepted {
  border-radius: 1.6rem;
  border: 1px solid #28960b;
  background: rgba(82, 155, 63, 0.168627451);
  color: #219304;
}
.global-search__status.win {
  border-radius: 1.6rem;
  border: 1px solid #9add1b;
  background: #e8ffbc;
  color: #3a5900;
}
.global-search__status.loss {
  border-radius: 1.6rem;
  border: 1px solid #a90000;
  background: #ffc3cd;
  color: #c30000;
}
.global-search__users-div--img {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.5rem;
  cursor: pointer;
}
.global-search__users-div--img:last-child {
  margin-right: 0;
}
.global-search__no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.global-search__no-data--text {
  color: var(--black-col);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 700;
}
.global-search__no-data.search-prompt--text {
  color: var(--g-search-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}
.global-search .search-prompt__icon {
  margin-bottom: 1.2rem;
  animation: pulse 1.5s infinite;
}
.global-search .search-prompt__icon img {
  width: 3.5rem;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
.global-search .search-prompt--text {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  max-width: 320px;
}
.global-search .search-prompt--text strong {
  color: #657ac9;
  font-weight: 600;
}
.global-search__loading-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
}
.global-search__loading-gif img {
  width: 100%;
}
.global-search__starting-text {
  font-size: 1.6rem;
  color: var(--black-col);
  font-weight: 500;
  line-height: 120%;
}

.container {
  transition: margin-top 0.7s ease;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(auto-fill, auto);
  background-color: var(--background-col);
}
@media only screen and (max-width: 48em) {
  .container {
    min-height: unset;
  }
}
.container.banners {
  margin-top: 6rem;
}

.opportunity-container {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
}

/* Admin area Innner  */
.admin-area {
  padding: 2rem 21.6rem;
}
@media only screen and (max-width: 64em) {
  .admin-area {
    padding: 0;
  }
}
@media only screen and (max-width: 75em) {
  .admin-area {
    padding: 2rem 2rem;
  }
}
@media only screen and (max-width: 90em) {
  .admin-area {
    padding: 2rem 0rem;
  }
}
.admin-area__header {
  margin-bottom: 2rem;
}
.admin-area__body {
  width: 100%;
  min-height: 80vh;
}

.p-lf {
  padding-left: 0;
  padding-right: 0;
}

.pl-0 {
  padding-left: 0;
}

.h-auto {
  height: auto;
}

.home-container {
  display: grid;
  grid-column: 1/26;
  grid-template-columns: repeat(25, 1fr);
  grid-row: 2;
  padding: 2rem 2.4rem;
  gap: 0.8rem;
}
@media only screen and (max-width: 106.25em) {
  .home-container {
    padding: 1.4rem 1.6rem;
  }
}

.main-sidebar {
  grid-column: 1/7;
  grid-row: 1/4;
  height: 100%;
  margin-right: 1rem;
}
@media only screen and (max-width: 75em) {
  .main-sidebar {
    grid-column: 1/11;
  }
}
@media only screen and (max-width: 37.5em) {
  .main-sidebar {
    grid-column: 1/26;
    grid-row: 1;
    margin-right: 0;
    padding: 1rem;
  }
}

.apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value, .apexcharts-datalabels, .apexcharts-pie-label {
  fill: var(--chart-label);
}

.apexcharts-text tspan {
  fill: var(--chart-label);
  font-weight: 200;
}

.top-performer {
  grid-column: 7/14;
  grid-row: 1/2;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .top-performer {
    grid-column: 11/26;
    grid-row: 1/2;
  }
}
@media only screen and (max-width: 37.5em) {
  .top-performer {
    grid-column: 1/26;
    grid-row: 2;
  }
}

.top-campaigns {
  grid-column: 7/14;
  grid-row: 2/3;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .top-campaigns {
    grid-column: 11/26;
    grid-row: 4/5;
  }
}
@media only screen and (max-width: 37.5em) {
  .top-campaigns {
    grid-column: 1/26;
    grid-row: 5;
  }
}

.average-deal-value {
  grid-column: 7/14;
  grid-row: 3/4;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .average-deal-value {
    grid-column: 11/26;
    grid-row: 7/8;
  }
}
@media only screen and (max-width: 37.5em) {
  .average-deal-value {
    grid-column: 1/26;
    grid-row: 8;
  }
}

#hp-average-deal-value .apexcharts-tooltip .apexcharts-tooltip-title {
  display: none;
}

#hp-average-deal-value .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
  display: none;
}

#hp-average-deal-value .apexcharts-toolbar {
  opacity: 0;
  visibility: hidden;
}

.agening-report {
  grid-column: 14/21;
  grid-row: 1/2;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .agening-report {
    grid-column: 11/26;
    grid-row: 2/3;
    height: 34rem !important;
  }
}
@media only screen and (max-width: 37.5em) {
  .agening-report {
    grid-column: 1/26;
    grid-row: 3;
  }
}

@media only screen and (max-width: 75em) {
  #hp-ageing-report .apexcharts-legend {
    top: 45% !important;
    left: 50% !important;
    transform: translate(85%, -50%);
    padding: 0 !important;
    right: unset !important;
    overflow: hidden;
  }
}

#hp-ageing-report .apexcharts-legend-text {
  margin-bottom: 0.6rem;
  font-size: 1.5rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--black-col) !important;
}
@media only screen and (max-width: 48em) {
  #hp-ageing-report .apexcharts-legend-text {
    margin-bottom: 0.4rem;
    font-size: 1.3rem !important;
  }
}

#hp-campaign-channel-chart .apexcharts-inner .apexcharts-data-label {
  font-weight: 600 !important;
}

/*.campaign-channels{
    grid-column: 14 / 19;
    grid-row: 2/3;
    height: 100%;
    padding: 0;
    @include respond(tab-land){
        grid-column: 11/26;
        grid-row: 5/6;
    }
    @include respond(phone){
        grid-column: 1/26;
        grid-row: 6;
    }
}
*/
.campaign-investment-returns {
  grid-column: 14/26;
  grid-row: 2/3;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .campaign-investment-returns {
    grid-column: 11/26;
    grid-row: 6/7;
  }
}
@media only screen and (max-width: 37.5em) {
  .campaign-investment-returns {
    grid-column: 1/26;
    grid-row: 7;
  }
}

#hp-campaign-investment-chart .apexcharts-tooltip .apexcharts-tooltip-title {
  display: none;
}

#hp-campaign-investment-chart .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
  display: none;
}

#hp-campaign-investment-chart .apexcharts-toolbar {
  opacity: 0;
  visibility: hidden;
}

#hp-campaign-investment-chart .apexcharts-legend-marker {
  display: none !important;
}

.opportunities-pie-chart {
  grid-column: 14/21;
  grid-row: 3/4;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .opportunities-pie-chart {
    grid-column: 11/26;
    grid-row: 8/9;
  }
}
@media only screen and (max-width: 37.5em) {
  .opportunities-pie-chart {
    grid-column: 1/26;
    grid-row: 9;
  }
}

#hp-oppurtunities-pie-chart {
  width: 100%;
}

#hp-oppurtunities-pie-chart .apexcharts-legend-marker {
  display: none !important;
}

#hp-oppurtunities-pie-chart .apexcharts-legend-series {
  margin: 0px !important;
}

#hp-oppurtunities-pie-chart .apexcharts-legend-text {
  margin-bottom: 1.2rem;
  font-size: 1.5rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--black-col) !important;
}
@media only screen and (max-width: 48em) {
  #hp-oppurtunities-pie-chart .apexcharts-legend-text {
    margin-bottom: 0.4rem;
    font-size: 1.3rem !important;
  }
}

#hp-oppurtunities-pie-chart .apexcharts-legend {
  top: 0 !important;
  padding: 0 !important;
  margin-top: 10%;
}
@media only screen and (max-width: 75em) {
  #hp-oppurtunities-pie-chart .apexcharts-legend {
    /*        top: 50% !important;*/
    /*        left: 70% !important;*/
    /*        transform: translate(65%, -50%);*/
    /*        padding: 0 !important;
    right: unset !important;*/
    overflow: hidden;
  }
}
@media only screen and (max-width: 37.5em) {
  #hp-oppurtunities-pie-chart .apexcharts-legend {
    /*transform: translate(70%, -50%);*/
  }
}

.lead-source-bar-chart {
  grid-column: 21/26;
  grid-row: 3/4;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .lead-source-bar-chart {
    grid-column: 11/26;
    grid-row: 9/10;
  }
}
@media only screen and (max-width: 37.5em) {
  .lead-source-bar-chart {
    grid-column: 1/26;
    grid-row: 10;
  }
}

.potential-revenue-gauge-chart {
  grid-column: 21/26;
  grid-row: 1/2;
  height: 100%;
  padding: 0;
}
@media only screen and (max-width: 75em) {
  .potential-revenue-gauge-chart {
    grid-column: 11/26;
    grid-row: 3/4;
  }
}
@media only screen and (max-width: 37.5em) {
  .potential-revenue-gauge-chart {
    grid-column: 1/26;
    grid-row: 4;
  }
}

.apexcharts-text.apexcharts-yaxis-title-text {
  fill: var(--black-col);
}

.apexcharts-legend-text {
  color: var(--black-col) !important;
}

.apexcharts-text.apexcharts-xaxis-title-text {
  fill: var(--black-col);
}

#hp-oppurtunities-pie-chart-winloss .apexcharts-legend-marker {
  display: none !important;
}

#hp-ageing-report-quotation .apexcharts-legend-marker {
  display: none !important;
}

/* header dropdown */
.header__profile-dropdown {
  display: none;
  position: absolute;
  width: 22.8rem;
  border-radius: 10px;
  border: 1px solid var(--table-border);
  background: var(--kebab-bg);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  overflow: hidden;
  right: 2rem;
  top: 5.5rem;
  padding: 0.4rem;
}
.header__profile-dropdown--active {
  display: block;
  z-index: 9999;
}
.header__dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.8rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.header__dropdown-item:hover {
  background: var(--select-hover);
}

/* User Profile */
.user-profile__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 37.5em) {
  .user-profile__row {
    flex-direction: column;
  }
}
.user-profile__field {
  flex: 1;
  margin-right: 2rem;
  margin-bottom: 2rem;
}
.user-profile__field:last-child {
  margin-right: 0;
}
.user-profile__label {
  display: block;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 0.4rem;
  color: #555B6C;
}
.user-profile__text {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  width: 20rem;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.user-profile__input {
  border-style: none;
  outline: none;
  background-color: transparent;
}

.user-form__password-change {
  display: block;
  margin-top: 1rem;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  max-height: 0;
  opacity: 0;
}
.user-form__password-change.is-visible {
  max-height: 500px;
  opacity: 1;
}
.user-form__password-change__title {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #555B6C;
}
.user-form__field {
  margin-bottom: 2rem;
}
.user-form__input-wrapper {
  position: relative;
}
.user-form__input-wrapper .crm-change-password-eye {
  font-size: 1.4rem;
  color: var(--black-col);
  position: absolute;
  right: 1rem;
}
.user-form__label {
  display: block;
  font-size: 1.3rem;
  color: #555B6C;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 0.8rem;
}
.user-form__input {
  width: 100%;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #A5ABC3;
  transition: border-bottom-color 0.3s ease;
  background-color: transparent;
}
.user-form__input:focus {
  border-bottom-color: #2B449D;
  outline: none;
}
.user-form__input--password {
  padding-right: 3rem;
}
.user-form__password-change-link {
  display: inline-block;
  color: #2B449D;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-decoration: underline;
  margin-bottom: 1rem;
  cursor: pointer;
}
.user-form__password-change-link:hover {
  text-decoration: none;
}
@media only screen and (max-width: 37.5em) {
  .user-form__password-change-link:hover {
    text-decoration: underline;
  }
}

/* Avatar Upload */
.avatar-upload {
  position: relative;
  width: 9.4rem;
  margin-bottom: 2rem;
}
.avatar-upload__edit {
  position: absolute;
  right: 0px;
  z-index: 1;
  bottom: 1.5rem;
}
.avatar-upload__edit input {
  display: none;
}
.avatar-upload__edit label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0;
  border-radius: 100%;
  background: #E5E8F2;
  border: 1px solid #CDD1E4;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.avatar-upload__edit label:hover {
  background: #d4d8e7;
  border-color: #d6d6d6;
}
.avatar-upload__edit label svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
}
.avatar-upload__preview {
  position: relative;
  width: 9.4rem;
  height: 9.4rem;
  flex-shrink: 0;
  border-radius: 100%;
  border: 1px solid #CDD1E4;
  background: #F2F3FA;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-upload__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.accordion__settings {
  padding: 0;
}
.accordion__settings .accordion__wrapper {
  margin-bottom: 2rem;
  cursor: pointer;
  overflow: hidden;
}
.accordion__settings .accordion__wrapper:last-child {
  margin-bottom: 0;
}
.accordion__settings .accordion__wrapper.active .accordion__heading {
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--accordion-border);
  background: var(--accordion-heading);
  padding: 1.5rem 2rem;
}
.accordion__settings .accordion__wrapper.active .accordion__heading svg {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.accordion__settings .accordion__wrapper.active .accordion__content {
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}
.accordion__settings .accordion__wrapper.active .accordion__text svg {
  transform: none;
}
.accordion__settings .accordion__wrapper .accordion__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 4px;
  border: 1px solid var(--accordion-border);
  background: var(--accordion-heading);
  padding: 1.5rem 2rem;
}
.accordion__settings .accordion__wrapper .accordion__heading svg {
  stroke: var(--black-col);
  width: 2rem;
  height: 2rem;
  transition: transform 0.3s ease;
}
.accordion__settings .accordion__wrapper .accordion__heading .accordion__text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.accordion__settings .accordion__wrapper .accordion__heading .accordion__text h3 {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.17px;
  color: var(--black-col);
}
.accordion__settings .accordion__wrapper .accordion__heading .accordion__text svg {
  width: 3.2rem;
  height: 3.2rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.accordion__settings .accordion__wrapper .accordion__heading .accordion__text .adminSettings {
  fill: var(--black-col);
}
.accordion__settings .accordion__wrapper .accordion__content {
  max-height: 0;
  opacity: 0;
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--accordion-border);
  background: var(--accordion-bg);
  border-top: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  line-height: 2;
}

.primary-button-border {
  border-radius: 4.8rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  color: #2B449D;
  border: 1px solid #2B449D;
  transition: all 0.3s ease-in-out;
  background-color: #FFFFFF;
}
.primary-button-border__icon {
  width: 2rem;
  height: 2rem;
  stroke: #2B449D;
  margin-right: 6px;
}
.primary-button-border:hover, .primary-button-border:active {
  background-color: #112673;
  color: #FFFFFF;
}
.primary-button-border:hover svg, .primary-button-border:active svg {
  stroke: #FFFFFF;
}

/* Profile | Notification settingsswitch - */
.profile-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
  display: flex;
}
.profile-switch__slider {
  position: relative;
  display: inline-block;
  width: 3.4rem;
  height: 1.8rem;
  background-color: var(--switch-button-bg);
  border-radius: 3.4rem;
  transition: background-color 0.4s;
}
@media only screen and (max-width: 64em) {
  .profile-switch__slider {
    width: 3.5rem;
    height: 1.9rem;
  }
}
.profile-switch__slider::before {
  position: absolute;
  content: "";
  height: 1.4rem;
  width: 1.4rem;
  left: 2px;
  bottom: 2px;
  background-color: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.4s;
  box-shadow: 0px 2px 3px 0px rgba(4, 9, 25, 0.15);
}
@media only screen and (max-width: 90em) {
  .profile-switch__slider::before {
    left: 0px;
  }
}
.profile-switch__input:checked + .profile-switch__slider {
  background-color: #2B449D;
}
.profile-switch__input:checked + .profile-switch__slider::before {
  transform: translateX(16px);
}

.admin-switch {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Admin Checkbox */
input[type=checkbox]:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin-top: 0px;
  margin-left: -1px;
  border: 1px solid #A5ABC3;
  background-color: var(--table-container);
  border-radius: 3px;
  line-height: 1.3;
  z-index: 9;
}

input[type=checkbox]:checked:after {
  width: 16px;
  height: 16px;
  display: block;
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  color: #FFFFFF;
  font-weight: 900;
  font-size: 10px;
  text-align: center;
  border-radius: 3px;
  background: #2B449D;
}

/* Notification Settings */
.notification-settings {
  padding: 0 2rem;
}
.notification-settings__header {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 0px;
  font-weight: bold;
  border-bottom: 1px solid var(--accordion-border);
}
.notification-settings__header--event {
  flex: 2;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--black-col);
}
.notification-settings__header--email, .notification-settings__header--push, .notification-settings__header--sms {
  flex: 1;
  text-align: center;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--black-col);
}
.notification-settings__item {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0px;
  border-bottom: 1px solid var(--accordion-border);
}
.notification-settings__item:last-child {
  border-bottom: none;
}
.notification-settings__item--toggle {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.notification-settings__item--toggle span {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  color: var(--black-col);
  top: 5px;
}
@media only screen and (max-width: 37.5em) {
  .notification-settings__item--toggle span {
    line-height: 2.3rem;
  }
}
.notification-settings__item--options {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.notification-settings__item--options .checkbox-input {
  width: 1rem;
  height: 1rem;
}
.notification-settings__count {
  border-radius: 4px;
  border: 1px solid var(--button-border);
  outline: none;
  display: flex;
  width: 6rem;
  height: 3rem;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: var(--black-col);
}

.m-sub-head {
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 2rem;
}

.m-head-icon {
  width: 2.4rem !important;
  height: 2.4rem !important;
  stroke: #040919;
}

/* Quotation templates */
.quotation-temp {
  background-color: var(--background-col);
  padding: 2.4rem 1.6rem;
  border-radius: 1.8rem;
}
.quotation-temp__opportunity {
  margin-bottom: 2.4rem;
}
.quotation-temp__icon-p {
  width: 4rem;
  height: 4rem;
  background-color: #8498E1;
}
.quotation-temp__description {
  display: block;
}
.quotation-temp__name_lg {
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.8rem;
  letter-spacing: -0.19px;
  color: var(--black-col);
  display: block;
}
.quotation-temp__name_sm {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  color: var(--black-col);
  display: block;
}
.quotation-temp .main-table {
  padding-bottom: 0rem;
}
.quotation-temp .main-table__detailsRow td {
  text-align: right;
}
.quotation-temp .main-table__sortBtn {
  margin-left: 1rem;
}
.quotation-temp .main-table__head {
  justify-content: flex-end;
}
.quotation-temp__signatory {
  margin-top: 1.6rem;
  display: flex;
  padding: 1rem 1.6rem;
  flex-direction: column;
  align-items: flex-end;
}
.quotation-temp__signatory__text {
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  color: #040919;
}

/* Lead management button */
.lead-btn {
  font: size 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  color: #2B449D;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.lead-btn .lead-link {
  text-decoration: none;
  color: var(--head-primary-color);
  margin-right: 4px;
}
.lead-btn .lead-link:hover {
  text-decoration: underline;
}
.lead-btn .lead-link:active {
  color: #2B449D;
}
.lead-btn .leadsvg {
  width: 1rem;
  height: 1rem;
  stroke: #2B449D;
}

.lead-paragraph {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
}

.field_type__box {
  padding: 0.8rem 1rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  color: var(--black-col);
  font-weight: 500;
  font-size: 1.5rem;
  font-style: normal;
  line-height: 100%;
}
.field_type__box.field {
  border-radius: 2rem;
  border: 1px solid var(--settings-field-type-border);
  background: var(--settings-field-type-bg);
}
.field_type__box.field svg.field__icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  stroke: var(--black-col);
}

.admin_td-btn {
  z-index: inherit;
  float: right;
}
.admin_td-btn__dropdown {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border-radius: 2rem;
  align-items: center;
}
.admin_td-btn__dropdown svg.drop__icon {
  width: 1.6rem;
  height: 1.6rem;
}
.admin_td-btn__dropdown:hover {
  background: var(--kebab-btn-hover);
}

.lead_fields_table .main-table__head {
  padding: 1.2rem 1.6rem;
}

.lead_fields_table .main-table__detailsRow td {
  padding: 1.2rem 1.6rem;
}

.main-table__head.justify-center {
  justify-content: center;
}

.product_master {
  padding: 0rem 2.4rem;
}
.product_master__body {
  background-color: #F5F7FF;
}
.product_master__body .main-table__sortBtn {
  margin-left: 2rem;
}

.gray-color {
  color: #555B6C;
}

tr.product-tpad.main-table__detailsRow td {
  padding: 1.6rem 1.4rem 1.4rem 1.6rem;
}

.product-m th.main-table__head {
  padding: 1.6rem 1.4rem !important;
}

.justify-sb {
  justify-content: space-between !important;
}

.text-left {
  text-align: left !important;
}

.terms-and-conditions {
  background-color: var(--whie-col);
  border: 1px solid #E5E8F2;
  border-radius: 1.8rem;
  padding: 1.6rem 1.6rem;
}
.terms-and-conditions p {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  margin: 0.6rem 0 2rem 0;
}

/* Admin Settings Card */
.settings-card {
  border: 1px solid var(--settings-card-border);
  border-radius: 8px;
  padding: 1.6rem;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 16rem;
}
.settings-card:hover {
  border: 1px solid #555B6C;
  background: var(--setting-card-hover);
}
.settings-card__link {
  text-decoration: none;
}
.settings-card__body {
  display: flex;
  align-items: flex-start;
}
.settings-card__icon_box {
  position: relative;
  margin-right: 1rem;
  display: flex;
}
.settings-card__rounded {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: #e5e7eb;
  border-radius: 50%;
}
.settings-card__svg {
  width: 2rem;
  height: 2rem;
  stroke: #040919;
  font-size: 1.5rem;
}
.settings-card__right {
  display: flex;
  flex-direction: column;
}
.settings-card__title {
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--black-col);
  margin: 0;
}
.settings-card__sub_title {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  margin: 4px 0;
  color: #555B6C;
}
.settings-card__bottom {
  margin-top: 0.8rem;
}
.settings-card__text {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%;
  margin: 0;
}

/* Admin Template  Card */
.template_card {
  border-radius: 1rem;
  background-color: #E5E8F2;
  border: 1px solid #e5e7eb;
}
.template_card__content {
  display: flex;
  flex-direction: column;
  padding: 0px 3.6rem 0px 3.6rem;
}
.template_card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--table-container);
  padding: 2rem;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0 1px 5px rgba(228, 228, 228, 0.1);
}
.template_card__template {
  cursor: pointer;
}
.template_card__text {
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3rem;
  letter-spacing: -0.19px;
  color: var(--black-col);
  margin-bottom: 0.8rem;
}
.template_card__date {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  color: #555B6C;
}
.template_card__button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.template_card__button:hover .template-card__options-icon {
  color: #040919;
}
.template_card__icon {
  width: 0.8rem;
  height: 1.8rem;
}

.dup-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0.8rem 1.2rem;
  color: #2B449D;
  border-style: none;
  background-color: transparent;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.dup-button__icon {
  stroke: #2B449D;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dup-button__text {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.dup-button:hover {
  color: #112673;
}

.admin-form {
  position: relative;
}
.admin-form__field {
  margin-bottom: 2rem;
}
.admin-form__label {
  display: block;
  font-size: 1.3rem;
  color: #555B6C;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 0.8rem;
}
.admin-form__input-wrapper {
  margin-top: 1rem;
}
.admin-form__input {
  width: 100%;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #A5ABC3;
  transition: border-bottom-color 0.3s ease;
  background: transparent;
}
.admin-form__input:focus {
  border-bottom-color: #2B449D;
  outline: none;
}
.admin-form__textarea {
  width: 100%;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #A5ABC3;
  transition: border-bottom-color 0.3s ease;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  resize: none;
}
.admin-form__textarea:focus {
  border-bottom-color: #2B449D;
  outline: none;
}
.admin-form__word-count {
  text-align: left;
  font-size: 0.9rem;
  color: #E5E8F2;
  margin-top: 0.4rem;
}

.field-type {
  position: relative;
}
.field-type__select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: 100%;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: var(--black-col);
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #A5ABC3;
  transition: border-bottom-color 0.3s ease;
}
.field-type__arrow {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #040919;
}
.field-type__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #F8F9FB;
  background: var(--select-box-bg);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  border-top: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}
.field-type__dropdown--open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.field-type__option {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  cursor: pointer;
}
.field-type__option:hover {
  background-color: var(--select-hover);
}
.field-type__option--selected {
  font-weight: bold;
}
.field-type__icon {
  margin-right: 1rem;
}
.field-type__icon svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}
.field-type__label {
  flex-grow: 1;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.field-type__checkmark {
  display: none;
  margin-left: 1rem;
}
.field-type__checkmark--icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--black-col);
}
.field-type__option--selected .field-type__checkmark {
  display: inline;
}
.field-type__cs-dropdown {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  position: relative;
}
.field-type__cs-dropdown--option {
  padding: 0.8rem;
  border-style: none;
  border-bottom: 1px solid #A5ABC3;
  width: 100%;
  outline: none;
  background-color: transparent;
  color: var(--black-col);
}
.field-type__remove-item {
  border-style: none;
  background-color: transparent;
  position: absolute;
  right: 0;
  cursor: pointer;
  z-index: 111;
}
.field-type__remove-item--icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--black-col);
}
.field-type__button {
  border-style: none;
  padding: 0.6rem 0.8rem;
  background-color: #2B449D;
  color: #FFFFFF;
  margin-top: 2rem;
  border-radius: 0.4rem;
}

input:-internal-autofill-selected {
  background-color: transparent !important;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media only screen and (max-width: 64em) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 37.5em) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.assignee-dropdown {
  position: relative;
  width: 100%;
}
.assignee-dropdown__label {
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}
.assignee-dropdown__label-required {
  color: red;
}
.assignee-dropdown__select {
  position: relative;
  border-bottom: 1px solid #A5ABC3;
  padding-bottom: 0.6rem;
  cursor: pointer;
}
.assignee-dropdown__trigger {
  display: flex;
  align-items: center;
  padding: 10px;
}
.assignee-dropdown__user-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #040919;
  margin-right: 0.6rem;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin-right: 10px;
}
.assignee-dropdown__selected-user {
  flex-grow: 1;
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  white-space: nowrap;
}
.assignee-dropdown__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #040919;
  position: absolute;
  right: 0.2rem;
}
.assignee-dropdown__options {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid #F8F9FB;
  background: #FFFFFF;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  border-top: none;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}
.assignee-dropdown__search-box {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #A5ABC3;
}
.assignee-dropdown__search-input {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  border: none;
  outline: none;
}
.assignee-dropdown__search-icon {
  width: 20px;
  height: 20px;
  fill: #888;
}
.assignee-dropdown__option {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.assignee-dropdown__option:hover {
  background-color: #f0f0f0;
}
.assignee-dropdown__user {
  margin-left: 10px;
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  white-space: nowrap;
}

.financial-year {
  width: 70%;
  /* SCSS styles converted to CSS */
}
@media only screen and (max-width: 37.5em) {
  .financial-year {
    width: 100%;
  }
}
.financial-year .modal__input--box {
  margin: 3rem 0;
}
.financial-year .admin-form__field {
  margin: 3rem 0;
}
.financial-year .modal__input--box--input {
  background-color: transparent;
}
.financial-year .modal__input--box--date-picker {
  border: none;
}
.financial-year .admin-form__input {
  border: none;
}
.financial-year .admin-form__input::placeholder {
  color: var(--black-col);
}
.financial-year .admin-form__textarea {
  outline: none;
  resize: none;
  box-sizing: border-box;
  color: var(--black-col);
  overflow: hidden;
  border: none;
  font-family: "DM Sans", sans-serif;
}
.financial-year .admin-form__textarea::placeholder {
  color: var(--black-col);
}
.financial-year .description__word-count {
  display: none;
}
.financial-year__footer {
  display: flex;
  justify-content: end;
}
.financial-year .modal__input--box--date-picker,
.financial-year .admin-form__input,
.financial-year .admin-form__textarea {
  border-bottom: 1px solid transparent;
}
.financial-year .modal__input--box--date-picker.active,
.financial-year .admin-form__input.active,
.financial-year .admin-form__textarea.active {
  border-bottom: 1px solid #A5ABC3;
}
.financial-year .modal__input--box.d-none {
  display: none;
}
.financial-year .modal__input--box.d-block {
  display: block;
}
.financial-year .primary-button, .financial-year .secondary-button {
  cursor: pointer;
}
.financial-year .d-none {
  display: none !important;
}
.financial-year__editbtn {
  display: flex;
}
.financial-year__editbtn.editable {
  display: none;
}
.financial-year__picker {
  width: 100%;
  border-style: none;
  background-color: transparent;
  outline: none;
  padding-bottom: 0.8rem;
  pointer-events: none;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: var(--black-col);
}
.financial-year__picker::placeholder {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.financial-year__picker.edit-mode {
  border-bottom: 1px solid #A5ABC3;
  pointer-events: all;
}

#financialyeargoalcancelBtn {
  display: none;
}

#financialyeargoalsaveBtn {
  display: none;
}

.migration__notice {
  border-radius: 0.4rem;
  border: 1px solid var(--migration-border);
  background: var(--migration-background);
  color: var(----accordion-heading);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 2rem;
}
.migration__notice p {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.migration__notice--icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--user-filter-active);
}
@media only screen and (max-width: 48em) {
  .migration__notice--icon {
    display: none;
  }
}
.migration__process {
  border-radius: 0.4rem;
  background: var(--migration-background);
  padding: 0 2rem 1.5rem;
  padding-bottom: 0;
}
.migration__process-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--black-col);
  margin-bottom: 1rem;
}
.migration__process-desc {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.migration__process-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
}
.migration__process-table th,
.migration__process-table td {
  border: 1px solid var(--migration-border);
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
}
.migration__process-table th {
  color: var(--black-col);
  font-weight: 600;
}
.migration__process-table td {
  color: var(--color-text);
}
.migration__requirements {
  border-radius: 0.4rem;
  background: var(--migration-background);
  padding: 1.5rem;
}
.migration__requirements-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--black-col);
  margin-bottom: 1rem;
}
.migration__requirements ul {
  list-style: disc;
  padding-left: 2rem;
  font-size: 1.3rem;
  color: var(--color-text);
  line-height: 1.6;
}
.migration__requirements ul li {
  margin-bottom: 0.8rem;
}
.migration__requirements ul ul {
  list-style: circle;
  margin-top: 0.5rem;
  margin-bottom: 0.8rem;
}
.migration__requirements ul ul li {
  margin-bottom: 0.4rem;
}
.migration__requirements-footer {
  margin-top: 1rem;
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1.6;
}
.migration__card {
  border-radius: 4px;
  border: 1px solid var(--accordion-border);
  background: var(--table-container);
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
}
.migration__card.selected {
  border: 2px solid var(--migration-progress);
}
.migration__card--uploading .migration__progress-bar {
  background-color: var(--migration-progress);
}
.migration__card--success .migration__progress-bar {
  background-color: var(--color-span);
}
.migration__card--failed .migration__progress-bar {
  background-color: var(--status-overdue-border);
}
.migration__progress-count {
  font-size: 1.2rem;
  color: var(--color-progress);
  text-align: right;
  font-weight: 400;
}
.migration__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.75rem;
}
@media only screen and (max-width: 37.5em) {
  .migration__header {
    flex-direction: column;
    gap: 1rem;
  }
}
.migration__file-info {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
@media only screen and (max-width: 48em) {
  .migration__file-info {
    align-items: flex-start;
    flex-direction: column;
  }
}
.migration__excel-icon {
  width: 2.4rem;
  height: 3rem;
}
.migration__title {
  color: var(----migration-head);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 0.2rem;
  letter-spacing: var(--letterSpacing-md, 0);
}
.migration__details {
  color: var(--migration-placeholder);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .migration__details {
    flex-direction: column;
    align-items: flex-start;
  }
}
.migration__template {
  color: var(--user-filter-active);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.migration__select-btn {
  background: transparent;
  border: none;
  border-radius: 4rem;
  border: 1px solid var(--user-filter-active);
  padding: 0.3rem 1rem;
  color: var(--user-filter-active);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 8px;
}
.migration__select-btn--icon {
  stroke: var(--user-filter-active);
  width: 1.8rem;
  height: 1.8rem;
}
.migration__select-btn--icon.tick {
  display: none;
}
.migration__select-btn--icon.plus {
  display: inline-block;
}
.migration__select-btn.selected {
  background: var(--color-secondary);
  color: var(--table-container);
  border: 1px solid var(--color-secondary);
}
.migration__select-btn.selected .migration__select-btn--icon {
  stroke: var(--table-container);
}
.migration__select-btn.selected .migration__select-btn--icon.tick {
  display: inline-block;
}
.migration__select-btn.selected .migration__select-btn--icon.plus {
  display: none;
}
.migration__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.migration__desc {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
}
.migration__desc--icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--color-text);
}
.migration__desc--text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  transition: all 0.3s ease;
}
.migration__desc--text.expanded {
  -webkit-line-clamp: unset;
}
.migration__read-toggle {
  color: var(--black-col);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  margin-left: 5px;
  font-weight: 400;
  padding: 0;
  white-space: nowrap;
}
.migration__template-icon {
  width: 0.9rem;
  height: 1.2rem;
  stroke: var(--user-filter-active);
}
.migration__progress {
  flex: 1;
  background: #f1f5f9;
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
  position: relative;
}
.migration__progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}
.migration__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.migration__footer p {
  color: var(--migration-paragraph);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  margin-top: 0.5rem;
}
@media only screen and (max-width: 37.5em) {
  .migration__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.migration__download-icon {
  stroke: var(--user-filter-active);
  width: 1.3rem;
  height: 1.6rem;
  cursor: pointer;
}
.migration__footer-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.migration__log {
  color: var(--migration-paragraph);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}
.migration__progress-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.migration__loader {
  display: inline-block;
  animation: spin 2s linear infinite;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.migration__upload.active {
  color: var(--color-span);
}
.migration__upload.failed {
  color: var(--status-overdue-border);
}
.migration__upload.progress {
  color: var(--migration-progress);
}
.migration__button {
  border-radius: 4.8rem;
  font-size: 1.3rem;
  font-style: normal;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1rem 1.6rem;
  background-color: #2B449D;
  color: var(--table-container);
  border: 1px solid #2B449D;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  gap: 0.5rem;
}
.migration__button--loader {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: var(--white-col);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.migration__button.action-inprogress-btn svg {
  display: none;
}
.migration__button.action-inprogress-btn .migration__button--loader {
  display: inline-block;
}
.migration__filename {
  display: block;
  max-width: 25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
@media only screen and (max-width: 48em) {
  .migration__filename {
    max-width: 19rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .migration__filename {
    max-width: 25rem;
  }
}
.migration__template-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: unset;
  cursor: pointer;
}
.migration__process-desc-main {
  display: flex;
  justify-content: space-between;
}
.migration__process-btn {
  border: unset;
  background-color: transparent;
}
.migration__process-btn svg {
  stroke: var(--user-filter-active);
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
}
.migration .migration__main {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.migration .migration__main.active {
  max-height: 1000px;
}
.migration__button-plus {
  stroke: #fff;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}
.migration__head {
  padding: 1.5rem 2rem;
  cursor: pointer;
}

/* rotation animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.module-list {
  background: #F5F6FA;
  padding: 1.6rem;
  border-radius: 1rem;
}
.module-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.module-list__title {
  color: #040919;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.16px;
}
.module-list__valid-date {
  color: #040919;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.module-list__heading {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: block;
}
.module-list__update-link {
  color: #002FC6;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-decoration-line: underline;
  display: flex;
  justify-content: center;
  align-items: center;
}
.module-list__update-link:hover {
  text-decoration: none;
}
.module-list__update-link--icon {
  width: 24px;
  height: 24px;
  fill: #2B449D;
}
.module-list__modules {
  position: relative;
}
.module-list__heading {
  color: #555B6C;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-bottom: 8px;
}
.module-list__items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.module-list__module {
  border: 1px solid #A5ABC3;
  background: #FFF;
  border-radius: 20px;
  white-space: nowrap;
  padding: 6px 10px;
  color: #040919;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

a.Web-width.website-share input {
  color: #002FC6;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-decoration-line: underline;
}

.website-link--icon {
  width: 24px;
  height: 24px;
  fill: #2B449D;
}

/* Quotation Address Details */
.quote {
  display: flex;
  justify-content: left;
  padding: 0px 2rem;
  margin-bottom: 2.4rem;
  gap: 5rem;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .quote {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
}
.quote__section-heading {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--black-col);
}
.quote__section-text {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: var(--black-col);
}
.quote__border {
  border-right: 1px solid var(#F2F3FA);
  height: 4rem;
}
@media only screen and (max-width: 37.5em) {
  .quote__border {
    height: 0px;
    width: 100%;
    border-top: 1px solid #E5E8F2;
  }
}
.quote__details {
  margin-top: 2rem;
  margin-bottom: 2.4rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--black-col);
  display: flex;
  justify-content: flex-start;
  gap: 50px;
  padding: 0px 2rem 2rem 2rem;
  border-bottom: 1px solid var(--border-color);
}
@media only screen and (max-width: 37.5em) {
  .quote__details {
    gap: 20px;
  }
}
@media only screen and (max-width: 23.4em) {
  .quote__details {
    gap: 10px;
    flex-direction: column;
  }
}
.quote__details-group {
  text-align: left;
}
.quote__details-group__label {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  color: #555B6C;
}
.quote__details-group__value {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  color: var(--black-col);
}

.skeleton-loader {
  background: var(--background-col);
}
.skeleton-loader__container {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(auto-fill, auto);
  min-height: 100vh;
  background: var(--background-col);
}
.skeleton-loader__header {
  grid-column: 1/25;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.4rem 0 2.4rem;
  border-bottom: 1px solid #E5E8F2;
  grid-row: 1;
}
.skeleton-loader__header--left {
  display: flex;
  align-items: center;
}
.skeleton-loader__header--right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1.6rem;
}
.skeleton-loader__logo {
  width: 5.3rem;
  height: 3.2rem;
  border-radius: 8px;
  background: #E5E8F2;
  margin-right: 3.1rem;
}
.skeleton-loader__nav-container {
  transition: left 0.4s ease-in-out;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__nav-container {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .skeleton-loader__nav-container {
    display: none;
  }
}
.skeleton-loader__navigation--list {
  list-style: none;
  display: flex;
  gap: 2.4rem;
  align-items: center;
}
.skeleton-loader__navigation--link {
  position: relative;
}
.skeleton-loader__navigation--item {
  width: 5.3rem;
  height: 1.5rem;
  border-radius: 8px;
  background: #E5E8F2;
}
.skeleton-loader .item-2 {
  width: 4.2rem;
  height: 1.5rem;
}
.skeleton-loader .item-3 {
  width: 9.9rem;
  height: 1.5rem;
}
.skeleton-loader .item-4 {
  width: 8rem;
  height: 1.5rem;
}
.skeleton-loader .item-5 {
  width: 8rem;
  height: 1.5rem;
}
.skeleton-loader .item-6 {
  width: 5.6rem;
  height: 1.5rem;
}
.skeleton-loader__search {
  display: flex;
  width: 31.6rem;
  height: 3.2rem;
  padding: 0.8rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: #E5E8F2;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__search {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
  }
}
@media only screen and (max-width: 23.4em) {
  .skeleton-loader__search {
    display: none;
  }
}
.skeleton-loader__round-btn {
  width: 3.2rem;
  height: 3.2rem;
  background: #E5E8F2;
  border-radius: 50%;
  border: none;
}
.skeleton-loader__profile {
  border-style: none;
  background: transparent;
  display: flex;
  align-items: center;
}
.skeleton-loader__name {
  width: 7rem;
  height: 1.5rem;
  border-radius: 8px;
  background: #E5E8F2;
}
@media only screen and (max-width: 37.5em) {
  .skeleton-loader__name {
    display: none;
  }
}
@media only screen and (max-width: 23.4em) {
  .skeleton-loader__name {
    display: none;
  }
}
.skeleton-loader__icon_svg {
  width: 1.6rem;
  height: 1.6rem;
  background: #E5E8F2;
  border-radius: 50%;
}
@media only screen and (max-width: 37.5em) {
  .skeleton-loader__icon_svg {
    display: none;
  }
}
@media only screen and (max-width: 23.4em) {
  .skeleton-loader__icon_svg {
    display: none;
  }
}
.skeleton-loader__home_container {
  display: grid;
  grid-column: 1/25;
  grid-template-columns: repeat(24, 1fr);
  grid-row: 2;
  padding: 2rem 2.4rem;
  gap: 0.8rem;
}
.skeleton-loader__main-sidebar {
  grid-column: 1/6;
  grid-row: 2/5;
  height: 100%;
  margin-right: 1.8rem;
  padding-top: 2.4rem;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__main-sidebar {
    grid-column: 1/9;
    grid-row: 2/10;
  }
}
@media only screen and (max-width: 37.5em) {
  .skeleton-loader__main-sidebar {
    grid-column: 1/25;
    grid-row: 2/4;
  }
}
.skeleton-loader__hand-img {
  width: 2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: #E5E8F2;
  margin-right: 0.8rem;
}
.skeleton-loader__header1 {
  width: 16.5rem;
  height: 2.2rem;
  border-radius: 8px;
  background: #E5E8F2;
}
.skeleton-loader__header2 {
  width: 31.3rem;
  height: 2.2rem;
  border-radius: 8px;
  background: #E5E8F2;
  margin: 1rem 0;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__header2 {
    width: 100%;
  }
}
@media only screen and (max-width: 90em) {
  .skeleton-loader__header2 {
    width: 100%;
  }
}
.skeleton-loader__box-date {
  display: flex;
  height: 1.7rem;
  align-items: flex-end;
  margin-top: 3.2rem;
}
.skeleton-loader__box-date--range-1 {
  width: 7.1rem;
  height: 1rem;
  border-radius: 8px;
  background: #E5E8F2;
  margin-right: 2px;
}
.skeleton-loader__box-date--range-2 {
  width: 8.7rem;
  height: 1rem;
  border-radius: 8px;
  background: #E5E8F2;
  margin-right: 20px;
}
.skeleton-loader__box-date--range-3 {
  width: 6.1rem;
  height: 1rem;
  border-radius: 8px;
  background: #E5E8F2;
  margin-right: 2px;
}
.skeleton-loader__box-date--range-4 {
  width: 7.3rem;
  height: 1rem;
  border-radius: 8px;
  background: #E5E8F2;
}
.skeleton-loader__con-rate_box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 1.8rem;
  border: 1px solid var(--table-border);
  padding: 0.6rem;
  margin-top: 0.8rem;
  width: 100%;
}
.skeleton-loader__boxrate {
  display: flex;
  width: 100%;
  height: 130px;
  padding: 1.6rem 2rem 2rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 1.4rem;
  background: #CCD0DE;
}
.skeleton-loader__value {
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
  width: 100%;
}
.skeleton-loader__value--circle {
  width: 3.2rem;
  height: 3.2rem;
  background: #CCD0DE;
  border-radius: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.skeleton-loader__boxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.skeleton-loader__boxes--text-1 {
  width: 7.4rem;
  height: 1rem;
  border-radius: 8px;
  background: #E5E8F2;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__boxes--text-1 {
    width: 100%;
  }
}
@media only screen and (max-width: 90em) {
  .skeleton-loader__boxes--text-1 {
    width: 100%;
  }
}
.skeleton-loader__boxes--text-2 {
  width: 3.3rem;
  height: 1rem;
  border-radius: 8px;
  background: #E5E8F2;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__boxes--text-2 {
    width: 60%;
  }
}
@media only screen and (max-width: 90em) {
  .skeleton-loader__boxes--text-2 {
    width: 60%;
  }
}
.skeleton-loader__boxes--text-3 {
  width: 7.4rem;
  height: 1.5rem;
  border-radius: 8px;
  background: #E5E8F2;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__boxes--text-3 {
    width: 80%;
  }
}
@media only screen and (max-width: 90em) {
  .skeleton-loader__boxes--text-3 {
    width: 80%;
  }
}
.skeleton-loader__funnel {
  display: flex;
  align-items: center;
  margin-top: 3.4rem;
  margin-bottom: 1.7rem;
  gap: 0.8rem;
}
.skeleton-loader__funnel--text {
  width: 10rem;
  height: 1.5rem;
  border-radius: 0.8rem;
  background: #E5E8F2;
}
.skeleton-loader__legend-text {
  display: inline-flex;
  padding: 3.2rem 0 2rem 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.3rem;
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__legend-text {
    width: 100%;
  }
}
.skeleton-loader__legend-text--text1 {
  width: 13.7rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
}
.skeleton-loader__legend-text--text2 {
  width: 26.6rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__legend-text--text2 {
    width: 100%;
  }
}
@media only screen and (max-width: 90em) {
  .skeleton-loader__legend-text--text2 {
    width: 100%;
  }
}
.skeleton-loader__legend-text--text3 {
  width: 4.4rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
}
.skeleton-loader__legend-text--text4 {
  width: 13.3rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
}
.skeleton-loader__legend-text--text5 {
  width: 1.3rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
}
.skeleton-loader__card-1 {
  grid-column: 6/13;
  grid-row: 2/3;
  height: 100%;
  padding: 0;
  border-radius: 1.8rem;
  border: 1px solid var(--table-border);
  background: var(--card-color);
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card-1 {
    grid-column: 9/25;
    grid-row: 2/3;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card-1 {
    grid-column: 1/25;
    grid-row: 4/5;
  }
}
.skeleton-loader__card-1--header {
  width: 100%;
  display: flex;
  gap: 0.8rem;
  align-self: stretch;
  padding: 2rem;
}
.skeleton-loader__card-1--body {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 2rem;
}
.skeleton-loader__card-1--body--text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.skeleton-loader__card-1--body--text1 {
  width: 13.7rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
  margin: 3px 0;
}
.skeleton-loader__card-1--body--text2 {
  width: 26.6rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
  margin: 1.15rem 0;
}
@media only screen and (max-width: 85.37em) {
  .skeleton-loader__card-1--body--text2 {
    width: 100%;
  }
}
@media only screen and (max-width: 90em) {
  .skeleton-loader__card-1--body--text2 {
    width: 100%;
  }
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card-1--body--text2 {
    width: 26.6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .skeleton-loader__card-1--body--text2 {
    width: 100%;
  }
}
.skeleton-loader__card-1--body--text3 {
  width: 4.4rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
  margin: 1.15rem 0;
}
.skeleton-loader__card-1--body--text4 {
  width: 13.3rem;
  height: 16px;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
  margin: 1.15rem 0;
}
.skeleton-loader__card-1--body--text5 {
  width: 1.3rem;
  height: 1.6rem;
  border-radius: 0px 4px 4px 0px;
  background: #E5E8F2;
}
.skeleton-loader__card-1--text1 {
  width: 12.4rem;
  height: 1.5rem;
  border-radius: 8px;
  background: #E5E8F2;
  display: block;
  margin-bottom: 4px;
}
.skeleton-loader__card-1--text2 {
  width: 7.1rem;
  height: 1rem;
  border-radius: 8px;
  opacity: 0.7;
  background: #E5E8F2;
  display: block;
}
.skeleton-loader__card-1--text3 {
  width: 8.7rem;
  height: 1rem;
  border-radius: 8px;
  opacity: 0.7;
  background: #E5E8F2;
}
.skeleton-loader__card2 {
  grid-column: 6/13;
  grid-row: 3/4;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card2 {
    grid-column: 9/25;
    grid-row: 3/4;
  }
}
@media only screen and (max-width: 37.5em) {
  .skeleton-loader__card2 {
    grid-column: 1/25;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card2 {
    grid-column: 1/25;
    grid-row: 5/6;
  }
}
.skeleton-loader__card3 {
  grid-column: 6/13;
  grid-row: 4/4;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card3 {
    grid-column: 9/25;
    grid-row: 4/5;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card3 {
    grid-column: 1/25;
    grid-row: 6/7;
  }
}
.skeleton-loader__card4 {
  grid-column: 13/20;
  grid-row: 2/3;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card4 {
    grid-column: 9/25;
    grid-row: 5/6;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card4 {
    grid-column: 1/25;
    grid-row: 7/8;
  }
}
.skeleton-loader__card5 {
  grid-column: 13/18;
  grid-row: 3/4;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card5 {
    grid-column: 9/25;
    grid-row: 6/7;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card5 {
    grid-column: 1/25;
    grid-row: 8/9;
  }
}
.skeleton-loader__card6 {
  grid-column: 13/20;
  grid-row: 4/4;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card6 {
    grid-column: 9/25;
    grid-row: 7/8;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card6 {
    grid-column: 1/25;
    grid-row: 9/10;
  }
}
.skeleton-loader__card7 {
  grid-column: 20/25;
  grid-row: 2/3;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card7 {
    grid-column: 9/25;
    grid-row: 8/9;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card7 {
    grid-column: 1/25;
    grid-row: 10/11;
  }
}
.skeleton-loader__card8 {
  grid-column: 18/25;
  grid-row: 3/4;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card8 {
    grid-column: 9/25;
    grid-row: 9/10;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card8 {
    grid-column: 1/25;
    grid-row: 10/12;
  }
}
.skeleton-loader__card9 {
  grid-column: 20/25;
  grid-row: 4/4;
}
@media only screen and (max-width: 62.3125em) {
  .skeleton-loader__card9 {
    grid-column: 9/25;
    grid-row: 10/11;
  }
}
@media only screen and (max-width: 48em) {
  .skeleton-loader__card9 {
    grid-column: 1/25;
    grid-row: 12/13;
  }
}

.is-loading {
  background: linear-gradient(110deg, var(--skelton-loader-one) 8%, var(--skelton-loader-two) 20%, var(--skelton-loader-one) 33%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
/* Hamburger Nav */
.hamburger-source {
  width: 3rem;
  height: 0.6rem;
  border-radius: 3px;
  /* grey 200 */
  background-color: #E5E8F2;
  margin-bottom: 3px;
}

.hamburger-animate1 {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-name: appear;
}

.hamburger-animate2 {
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-name: appear;
}

.hamburger-animate3 {
  animation-duration: 1s;
  animation-delay: 0.4s;
  animation-name: appear;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes loading {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.empty-ml-16 {
  margin-left: 1.6rem;
}

.empty-ml-20 {
  margin-left: 2rem;
}

.empty-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.empty-funnel__bar {
  border-radius: 8px;
  opacity: 0.5;
  background: var(--skelton-loader-one);
  width: 20rem;
  height: 2.4rem;
  margin: 4px 0 0 0;
  border-radius: 5px;
  animation: loading 0.6s linear infinite alternate;
}
.empty-funnel__bar--top {
  width: 20rem;
}
.empty-funnel__bar--middle {
  width: 13.4rem;
}
.empty-funnel__bar--bottom {
  width: 5.8rem;
}
.empty-funnel__h-text {
  margin-top: 2rem;
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.empty-funnel__text {
  color: var(--black-col);
  text-align: center;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.empty-funnel.mt-40 {
  margin-top: 4rem;
}

.empty-sufficient {
  margin: 4rem auto;
}
.empty-sufficient__box {
  width: 13.4rem;
  height: 2.4rem;
  border-radius: 8px;
  background: var(--skelton-loader-one);
  padding: 4px;
  display: block;
  margin-top: 5px;
  position: relative;
  animation: loading 0.6s linear infinite alternate;
}
.empty-sufficient__box--hexagon {
  height: 1.4rem;
  aspect-ratio: 1/0.8660254038;
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background: var(--skelton-loader-two);
}

.empty-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 12.1rem;
  width: 21.4rem;
}
.empty-chart__column {
  width: 26px;
  border: 1.445px solid #FFFFFF;
  background: rgb(229, 232, 242);
  animation: loading 0.6s linear infinite alternate;
}
.empty-chart__column--short {
  height: 7.2rem;
}
.empty-chart__column--medium {
  height: 12.1rem;
}
.empty-chart__column--medium1 {
  height: 10.9rem;
}
.empty-chart__column--medium2 {
  height: 8.8rem;
}

.empty-ageing {
  width: 30rem;
  height: 15rem;
  position: relative;
  overflow: hidden;
  width: 30rem;
  height: 15rem;
  transform: rotate(180deg);
}
.empty-ageing__semicircle {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 1px solid #F2F3F9;
  box-sizing: border-box;
}
.empty-ageing__semicircle--outer {
  border-color: #F2F3F9;
}
@media only screen and (max-width: 90em) {
  .empty-ageing__semicircle--outer {
    width: 30rem;
    height: 30rem;
  }
}
.empty-ageing__semicircle--inner1 {
  width: 24rem;
  height: 24rem;
  left: 3rem;
  bottom: 3rem;
  border-color: #F2F3F9;
  animation: loading 0.6s linear infinite alternate;
}
.empty-ageing__semicircle--inner2 {
  width: 18rem;
  height: 18rem;
  left: 6rem;
  bottom: 6rem;
  border-color: #F2F3F9;
  animation: loading 0.6s linear infinite alternate;
}
.empty-ageing__semicircle--inner3 {
  width: 12rem;
  height: 12rem;
  left: 9rem;
  bottom: 9rem;
  border-color: #F2F3F9;
  animation: loading 0.6s linear infinite alternate;
}
.empty-ageing__semicircle--inner4 {
  width: 10rem;
  height: 10.2rem;
  left: 10.1rem;
  bottom: 9.9rem;
  background-color: #F2F3F9;
  animation: loading 0.6s linear infinite alternate;
}
.empty-ageing__fill {
  position: absolute;
  top: -2.3rem;
  left: -15rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);
  animation: loading 0.6s linear infinite alternate;
}
.empty-ageing__fill--1 {
  background: url(../images/polygon.svg) no-repeat;
}

.empty-h-chart {
  width: 100%;
  max-width: 60rem;
  padding: 1rem;
}
.empty-h-chart__bar-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.empty-h-chart__bar {
  height: 3rem;
  background-color: var(--skelton-loader-one);
  transition: width 0.3s ease;
  border: 1px solid #FFFFFF;
  animation: loading 0.6s linear infinite alternate;
}
.empty-h-chart__bar--first {
  background-color: var(--skelton-loader-one);
}
.empty-h-chart__bar--second {
  background-color: var(--skelton-loader-two);
}
.empty-h-chart__bar--third {
  background-color: var(--skelton-loader-one);
}
.empty-h-chart__bar--fourth {
  background-color: var(--skelton-loader-two);
}

.empty-piecharts {
  width: 25rem;
  height: 25rem;
  padding: 6rem;
  border-radius: 50%;
  background: radial-gradient(var(--dashboard-graph-color) 0 0) content-box, conic-gradient(from -90deg, #F2F3F9 60deg, #FFFFFF 0 61deg, #F2F3F9 0 120deg, #FFFFFF 0 121deg, #F2F3F9 0 180deg, var(--dashboard-graph-color) 0);
  position: relative;
  animation: loading 0.6s linear infinite alternate;
}

.empty-gauge-charts {
  width: 25rem;
  height: 25rem;
  padding: 1.5rem;
  border-radius: 50%;
  background: radial-gradient(var(--dashboard-graph-color) 0 0) content-box, conic-gradient(from -90deg, #F2F3F9 60deg, #FFFFFF 0 61deg, #F2F3F9 0 120deg, #FFFFFF 0 121deg, #F2F3F9 0 180deg, #FFFFFF 0);
  position: relative;
  animation: loading 0.6s linear infinite alternate;
}

.empty-gauge-pointer {
  position: absolute;
  width: 71%;
  height: 71%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: transparent;
  rotate: calc(var(--score) * 180deg / 100 - 90deg);
}

.empty-gauge-pointer::before {
  content: "";
  display: block;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid #E5E8F2;
  position: absolute;
  rotate: 0deg;
  top: -11%;
  left: 50%;
  translate: -50% -50%;
}

.empty-v-barcharts {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 15rem;
  margin: 0 auto;
}
.empty-v-barcharts__group {
  display: flex;
  margin-right: 4rem;
  align-items: flex-end;
}
.empty-v-barcharts__group:last-child {
  margin-right: 0;
}
.empty-v-barcharts__bar {
  width: 2rem;
  background-color: #F2F3F9;
  margin-right: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  animation: loading 0.6s linear infinite alternate;
}
.empty-v-barcharts__bar--tall {
  height: 13rem;
}
.empty-v-barcharts__bar--medium {
  height: 9rem;
}
.empty-v-barcharts__bar--medium1 {
  height: 12rem;
}
.empty-v-barcharts__bar--short {
  height: 7.2rem;
}
.empty-v-barcharts__bar::after {
  content: attr(data-value);
  position: absolute;
  bottom: -2rem;
  font-size: 1.4rem;
}

@keyframes loading {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.col-g-1 {
  grid-column: 13/20;
  grid-row: 2/3;
  height: 100%;
  padding: 0;
}

.col-g-2 {
  grid-column: 13/18;
  grid-row: 3/4;
}

.col-g-3 {
  grid-column: 13/20;
  grid-row: 4/4;
}

.col-g-4 {
  grid-column: 20/25;
  grid-row: 2/3;
}

.col-g-5 {
  grid-column: 18/25;
  grid-row: 3/4;
}

.col-g-6 {
  grid-column: 20/25;
  grid-row: 4/4;
}

.chart-h {
  height: 16rem;
  overflow: hidden;
}

.empty-text__contant {
  text-align: center;
  flex-direction: column;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}
.empty-text--title {
  color: var(--empty-title);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.empty-text--text {
  color: var(--empty-data);
  text-align: center;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.product-tags__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 25rem;
}
.product-tags__name {
  border: 1px solid var(--table-tr-border);
  border-radius: 2rem;
  padding: 0.2rem 0.6rem;
  font-size: 1.2rem;
  white-space: break-spaces;
}
.product-tags__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.product-tags__plus {
  border: 1px solid var(--table-tr-border);
  background-color: transparent;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--color-white);
  line-height: 100%;
}
.product-tags__minus {
  border: 1px solid var(--table-tr-border);
  background-color: transparent;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--color-white);
  line-height: 100%;
}

.authentication {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(auto-fill, auto);
  min-height: 100vh;
}
.authentication__left {
  grid-column: 1/13;
  background-image: url(../../images/login-left-image.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-color: var(--user-filter-active);
  padding: 5rem;
  padding-bottom: 0;
  background-size: contain;
  position: relative;
}
@media only screen and (max-width: 64em) {
  .authentication__left {
    padding: 3rem;
  }
}
@media only screen and (max-width: 48em) {
  .authentication__left {
    display: none;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__left.auth-left {
    display: none;
  }
}
.authentication__right {
  grid-column: 13/25;
  padding: 3rem;
}
@media only screen and (max-width: 48em) {
  .authentication__right {
    grid-column: 1/25;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__right.auth-right {
    grid-column: 1/25;
  }
}
.authentication__logo {
  width: auto;
  height: 2rem;
  margin: auto;
  display: block;
}
.authentication__head {
  text-align: center;
  padding-top: 1rem;
  font-size: 3.6rem;
  font-style: normal;
  font-weight: 700;
  color: var(--card-two-color);
  padding-bottom: 10rem;
}
@media only screen and (max-width: 90em) {
  .authentication__head {
    font-size: 3.3rem;
  }
}
@media only screen and (max-width: 75em) {
  .authentication__head {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__head {
    font-size: 2.6rem;
  }
}
.authentication__head-span {
  color: var(--login-span);
}
.authentication__banner-img {
  width: 60rem;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 100em) {
  .authentication__banner-img {
    width: 55rem;
  }
}
@media only screen and (max-width: 75em) {
  .authentication__banner-img {
    width: 48rem;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__banner-img {
    width: 40rem;
  }
}
.authentication__signup-head {
  align-items: center;
  justify-content: flex-end;
  display: flex;
  gap: 1rem;
}
.authentication__account-para {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  color: #555B6C;
}
.authentication__head-button {
  background-color: #2B449D;
  border: 0;
  padding: 0.7rem 1.2rem;
  border-radius: 4.8rem;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: 0.3s;
}
.authentication__head-button:hover {
  background-color: #1b2d6a;
}
.authentication__signup-form {
  padding: 6rem 14rem;
  padding-bottom: 0;
}
.authentication__signup-form.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media only screen and (max-width: 90em) {
  .authentication__signup-form {
    padding: 4rem 12rem;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 75em) {
  .authentication__signup-form {
    padding: 4rem 6rem;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__signup-form {
    padding: 3.5rem;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 48em) {
  .authentication__signup-form {
    padding: 4rem 3rem;
    padding-bottom: 0;
  }
}
.authentication__welcome-text {
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  color: #555B6C;
}
.authentication__form-head {
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  color: #212121;
  white-space: nowrap;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 90em) {
  .authentication__form-head {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__form-head {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .authentication__form-head {
    font-size: 2.5rem;
  }
}
.authentication__form-main {
  position: relative;
  margin-top: 3.4rem;
}
@media only screen and (max-width: 64em) {
  .authentication__form-main {
    margin-top: 1.4rem;
  }
}
@media only screen and (max-width: 48em) {
  .authentication__form-main {
    margin-top: 2.4rem;
  }
}
.authentication__input-main {
  position: relative;
}
.authentication__input-main.reset-password {
  margin-bottom: 5rem;
}
@media only screen and (max-width: 64em) {
  .authentication__input-main {
    margin-top: 5rem;
  }
}
.authentication__input-main:focus-within .authentication__form-label,
.authentication__input-main .authentication__form-input:not(:placeholder-shown) ~ .authentication__form-label {
  top: -0.3rem;
  font-size: 1.3rem;
  color: #333;
}
.authentication__input-main:focus-within .authentication__form-label,
.authentication__input-main .authentication__form-input:not(:placeholder-shown) ~ .authentication__form-label {
  top: -0.3rem;
  font-size: 1.3rem;
  color: #333;
}
.authentication__input-main .authentication__form-input:-webkit-autofill ~ .authentication__form-label {
  top: -0.3rem;
  font-size: 1.3rem;
  color: #333;
}
.authentication__form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #A5ABC3;
  margin-top: 1rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  color: #212121;
  padding: 1.2rem 1rem 0.6rem 0;
  background: transparent;
  outline: none;
  padding-bottom: 0.3rem;
}
.authentication__form-input:-webkit-autofill, .authentication__form-input:-webkit-autofill:hover, .authentication__form-input:-webkit-autofill:focus, .authentication__form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #212121 !important;
  font-weight: 700 !important;
  transition: background-color 5000s ease-in-out 0s;
}
.authentication__form-label {
  position: absolute;
  top: 2.3rem;
  left: 0;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: #212121;
  pointer-events: none;
  transition: all 0.3s ease;
}
.authentication__input-main:focus-within .authentication__form-label, .authentication__form-input:not(:placeholder-shown) + .authentication__form-label {
  top: -0.3rem;
  font-size: 1.3rem;
  color: #333;
}
.authentication .authentication__form-input:-webkit-autofill + .authentication__form-label {
  top: -0.3rem;
  font-size: 1.3rem;
  color: #333;
}
.authentication__eye-button {
  width: 2rem;
  height: 2rem;
  stroke: #212121;
}
.authentication__forgot-link {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  color: #212121;
  text-decoration: underline;
}
.authentication__signup-button-main {
  width: 100%;
  margin-top: 4rem;
  background-color: #2B449D;
  border: 0;
  padding: 1.8rem;
  border-radius: 4.8rem;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: 0.3s;
}
.authentication__signup-button-main:hover {
  background-color: #1b2d6a;
}
@media only screen and (max-width: 64em) {
  .authentication__signup-button-main {
    margin-top: 2rem;
    padding: 1.4rem;
  }
}
.authentication__login-with-container {
  padding: 4rem 0;
  position: relative;
}
@media only screen and (max-width: 64em) {
  .authentication__login-with-container {
    padding: 3rem 0;
  }
}
.authentication__login-with-container hr {
  border: 0;
  border-bottom: 1px solid #E5E8F2;
}
.authentication__login-with-text {
  text-align: center;
  display: block;
  color: #595959;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  background-color: #FFFFFF;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  width: 10rem;
}
.authentication__other-autentications {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.authentication__auth-button {
  background: transparent;
  border-radius: 4.8rem;
  border: 1px solid #DEE3F1;
  padding: 1.4rem;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  color: #040919;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #FFFFFF;
}
.authentication__auth-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 64em) {
  .authentication__auth-button {
    padding: 1rem;
  }
}
.authentication__auth-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
.authentication__support-button {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: #212121;
  text-align: center;
  display: block;
  padding: 2.4rem 0;
}
.authentication__support-button-inner {
  text-decoration: underline;
  font-weight: 600;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: #212121;
}
.authentication__eye-icon-parent {
  position: relative;
}
.authentication__eye-icon-open {
  width: 1.6rem;
  height: 1.6rem;
  /* stroke: #212121; */
  filter: contrast(0.5);
  cursor: pointer;
}
.authentication__eye-icon-main {
  position: absolute;
  bottom: 0;
  right: 0;
}
.authentication__service-para {
  color: #555B6C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  padding: 2rem 0;
}
@media only screen and (max-width: 64em) {
  .authentication__service-para {
    padding-bottom: 0;
  }
}
.authentication__service-para span {
  font-weight: 600;
}
.authentication__password-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #E5E8F2;
  border-radius: 1.8rem;
  padding: 6rem;
  min-width: 40%;
  width: 35%;
}
@media only screen and (max-width: 90em) {
  .authentication__password-container {
    min-width: 43%;
  }
}
@media only screen and (max-width: 64em) {
  .authentication__password-container {
    min-width: 58%;
  }
}
@media only screen and (max-width: 62.3125em) {
  .authentication__password-container {
    min-width: 60%;
  }
}
@media only screen and (max-width: 48em) {
  .authentication__password-container {
    min-width: 70%;
  }
}
@media only screen and (max-width: 37.5em) {
  .authentication__password-container {
    min-width: 90%;
    padding: 2rem;
  }
}
.authentication__error-message {
  color: #E13E3E;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  position: absolute;
  left: 0;
  bottom: -1.8rem;
}
@media only screen and (max-width: 48em) {
  .authentication__error-message {
    bottom: -2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .authentication__error-message {
    bottom: -2rem;
    font-size: 1.1rem;
  }
}
.authentication__error-message.forgot-password-crm {
  bottom: -3.4rem;
}
.authentication__google-mail {
  background-color: var(--card-two-color);
  padding: 0.8rem 1.6rem;
  border-radius: 10rem;
  width: max-content;
  margin-top: 1.6rem;
}
.authentication__mail-inner-text {
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.authentication__mail-inner-text img {
  width: 2.6rem;
  height: 2rem;
  object-fit: contain;
}
.authentication__otp-para {
  color: var(--tab-color);
  text-align: center;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.authentication__otp-para a {
  text-decoration: underline;
  color: var(--tab-color);
  text-align: center;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
}
.authentication__reset-link-main {
  margin: 4rem 0;
  display: flex;
  justify-content: center;
}
.authentication__reset-link-main img {
  display: flex;
}
.authentication__count {
  position: absolute;
  top: 1rem;
  right: 0.5rem;
  background-color: #FF4D69;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 700;
}

.otp__label {
  color: #212121;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 1rem;
  display: block;
}
.otp__inputs {
  display: flex;
  gap: 2rem;
  justify-content: center;
}
.otp__input {
  width: 6rem;
  height: 2rem;
  font-size: 2.2rem;
  padding: 1.8rem 0;
  text-align: center;
  border: none;
  border-bottom: 1px solid #A5ABC3;
  outline: none;
}
@media only screen and (max-width: 90em) {
  .otp__input {
    width: 6.8rem;
  }
}
@media only screen and (max-width: 75em) {
  .otp__input {
    width: 4.8rem;
  }
}
@media only screen and (max-width: 64em) {
  .otp__input {
    width: 5.8rem;
  }
}
@media only screen and (max-width: 48em) {
  .otp__input {
    width: 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .otp__input {
    width: 3.5rem;
    height: 2rem;
    font-size: 1.4rem;
  }
}
.otp__input:focus {
  border-color: #000;
}
.otp__input::placeholder {
  color: transparent;
}

.otp-auth__container {
  display: flex;
  gap: 1rem;
  justify-content: start;
  margin-top: 2rem;
}
.otp-auth__input {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid #D8D9DA;
  border-radius: 0.5rem;
  text-align: center;
  font-size: 2rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.otp-auth__input:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.g-authenticator {
  border-radius: 0.6rem;
  align-items: center;
  display: flex;
}
@media only screen and (max-width: 37.5em) {
  .g-authenticator {
    margin-bottom: 1rem;
  }
}
.g-authenticator__box {
  border-radius: 20px;
  background: #e5e8f2;
  padding: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.g-authenticator__box img {
  width: 1.9rem;
  height: 2rem;
}
.g-authenticator__head {
  color: var(--color-black);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.17px;
  white-space: nowrap;
}
.g-authenticator__desc {
  color: var(--color-black);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.leads-container {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
}

.campaign-container {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
}

.quotation-container {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
}

/*********Flex*************/
a {
  text-decoration: none;
}

.d-flex {
  display: flex;
}

.d-none {
  display: none;
}

.flex-column {
  flex-direction: column;
}

.justify-content-end {
  justify-content: end !important;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.full-width {
  width: 100%;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: flex-start;
}

.verticla-sml-line {
  display: block;
  height: 3rem;
  width: 1px;
  background-color: rgba(185, 185, 185, 0.4196078431);
  margin-right: 0.8rem;
}

.d-block {
  display: block !important;
}

/********Editable field***********/
.edit {
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  text-transform: capitalize;
  padding-top: 0.5rem;
  border-bottom: 1px solid #A5ABC3;
  background: inherit;
}

.non-edit {
  border: none;
  outline: none;
  box-shadow: none;
  background: inherit;
  width: 100%;
}

.label {
  display: block;
}

.link-like {
  color: #2B449D !important;
  cursor: pointer;
  display: inline-block;
}

.link-like-header {
  height: 1.6rem;
  width: 1.6rem;
}

.link-container {
  display: flex;
  align-items: center;
  flex-grow: 0;
}

.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.label {
  display: block;
}

.link-like {
  color: #2B449D !important;
  cursor: pointer;
  display: inline-block;
}

.link-like-header {
  height: 1.6rem;
  width: 1.6rem;
}

.link-container {
  display: flex;
  align-items: center;
  flex-grow: 0;
}

.min-h-auto {
  min-height: auto !important;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.4rem;
}

.mr-2 {
  margin-right: 0.8rem;
}

.mr-3 {
  margin-right: 1.2rem;
}

.mr-4 {
  margin-right: 1.6rem;
}

.mr-5 {
  margin-right: 2rem;
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 0.4rem;
}

.ml-2 {
  margin-left: 0.8rem;
}

.ml-3 {
  margin-left: 1.2rem;
}

.ml-4 {
  margin-left: 1.6rem;
}

.ml-5 {
  margin-left: 2rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.4rem;
}

.mb-2 {
  margin-bottom: 0.8rem;
}

.mb-3 {
  margin-bottom: 1.2rem;
}

.mb-4 {
  margin-bottom: 1.6rem;
}

.mb-5 {
  margin-bottom: 2rem;
}

.mb-6 {
  margin-bottom: 3.2rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.4rem;
}

.mt-2 {
  margin-top: 0.8rem;
}

.mt-3 {
  margin-top: 1.2rem;
}

.mt-4 {
  margin-top: 1.6rem;
}

.mt-5 {
  margin-top: 2rem;
}

.mt-6 {
  margin-top: 3.2rem;
}

.pl-4 {
  padding-left: 1.6rem;
}

.text-align-right {
  text-align: right;
}

.horizontal-line {
  color: #A5ABC3;
  margin: 2rem 0;
  opacity: 0.3;
}
.horizontal-line.hide-line {
  opacity: 0;
  margin: 1.5rem 0;
}

.editable {
  border-bottom: 1px solid var(--custom-input-border) !important;
  cursor: text !important;
}

.box-container {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 37.5em) {
  .box-container {
    display: block;
  }
}

.base-font {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.sub-head {
  color: #555B6C;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  white-space: nowrap;
}

.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

.vertical-sm-line {
  width: 1px;
  height: 1.6rem;
  background-color: #E5E8F2;
  margin: 0 0.8rem;
}

.main-section {
  grid-column: 5/25;
}
@media only screen and (max-width: 90em) {
  .main-section {
    grid-column: 6/25;
  }
}
@media only screen and (max-width: 75em) {
  .main-section {
    grid-column: 6/25;
  }
}
@media only screen and (max-width: 62.3125em) {
  .main-section {
    grid-column: 1/25;
  }
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

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

.first-letter {
  color: #040919;
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.spacing-lg {
  padding: 1.6rem 0;
  display: block;
}
@media only screen and (max-width: 90em) {
  .spacing-lg {
    padding: 1.2rem 0;
  }
}
@media only screen and (max-width: 48em) {
  .spacing-lg {
    padding: 0.8rem;
  }
}

.green-circle {
  width: 3.2rem;
  height: 3.2rem;
  background-color: #A0CC16;
  border-radius: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.green-circle__icon {
  width: 1.7rem;
  height: 1.7rem;
  stroke: #040919;
}

.dashboard-grids {
  border-radius: 1.8rem;
  border: 1px solid var(--dashboard-border);
  background-color: var(--dashboard-graph-color);
  padding: 2rem;
  height: 33rem;
  position: relative;
}
@media only screen and (max-width: 106.25em) {
  .dashboard-grids {
    padding: 1.4rem;
  }
}
@media only screen and (max-width: 100em) {
  .dashboard-grids {
    padding: 1.4rem 1rem;
  }
}
@media only screen and (max-width: 75em) {
  .dashboard-grids {
    padding: 2rem;
  }
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.4rem;
}

.pb-2 {
  padding-bottom: 0.8rem;
}

.pb-3 {
  padding-bottom: 1.2rem;
}

.pb-4 {
  padding-bottom: 1.6rem;
}

.pb-5 {
  padding-bottom: 2rem;
}

.pt-1 {
  padding-top: 0.4rem;
}

.pt-2 {
  padding-top: 0.8rem;
}

.pt-3 {
  padding-top: 1.2rem;
}

.pt-4 {
  padding-top: 1.6rem;
}

.pt-5 {
  padding-top: 2rem;
}

.pl-1 {
  padding-left: 0.4rem;
}

.pl-2 {
  padding-left: 0.8rem;
}

.pl-3 {
  padding-left: 1.2rem;
}

.pl-4 {
  padding-left: 1.6rem;
}

.pl-5 {
  padding-left: 2rem;
}

.pr-1 {
  padding-right: 0.4rem;
}

.pr-2 {
  padding-right: 0.8rem;
}

.pr-3 {
  padding-right: 1.2rem;
}

.pr-4 {
  padding-right: 1.6rem;
}

.pr-5 {
  padding-right: 2rem;
}

.table-empty-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.table-empty-screen--loader {
  width: 4.8rem;
  height: 4.8rem;
}
.table-empty-screen--typing {
  color: var(--black-col);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.17px;
}

.form-control {
  border-bottom: 1px solid #A5ABC3;
  flex-grow: 1;
  padding-bottom: 8px;
}

.gap-10 {
  gap: 10px;
}

.form-country {
  width: 7rem !important;
}

.border-none {
  border: none !important;
}

.country-icon {
  width: 20px !important;
  height: 10px !important;
  margin-top: 5px;
  fill: #040919;
  cursor: pointer;
}

.progress-box {
  padding: 1.6rem 0;
  background: var(--progress-box);
  border-radius: 1rem;
  margin-bottom: 4rem;
}

.details-page-container {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-row: 2;
}
@media only screen and (max-width: 90em) {
  .details-page-container {
    padding: 0 0.1 0.6rem;
  }
}

.quotaiton-center-area {
  grid-column: 5/25;
  padding-left: 2.4rem;
  overflow: hidden;
}
@media only screen and (max-width: 64em) {
  .quotaiton-center-area {
    grid-column: 7/25;
  }
}
@media only screen and (max-width: 37.5em) {
  .quotaiton-center-area {
    grid-column: 1/25;
    padding-left: 0;
  }
}

body.modal-open {
  overflow: hidden;
  padding-right: 1.5rem;
}

.right-vertical-modal {
  top: 2.5%;
  right: 2rem;
  min-height: 95vh;
}

.middle-small-modal {
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: 70rem !important;
}
@media only screen and (max-width: 37.5em) {
  .middle-small-modal {
    width: 95% !important;
  }
}

.admin-modal-w {
  width: 54rem;
}
@media only screen and (max-width: 48em) {
  .admin-modal-w {
    width: 75rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .admin-modal-w {
    width: 42rem;
  }
}

.notification-modal-w {
  width: 80rem;
}
@media only screen and (max-width: 48em) {
  .notification-modal-w {
    width: 66rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .notification-modal-w {
    width: 42rem;
  }
}
@media only screen and (max-width: 23.4em) {
  .notification-modal-w {
    width: 38rem;
  }
}

.input-discount {
  border-radius: 0.8rem;
  outline: none;
  padding: 0.8rem 1.2rem;
  border: 0;
  pointer-events: none;
}
.input-discount.edit-mode {
  border: 1px solid #A5ABC3;
  pointer-events: all;
}

.delete-row {
  width: 1rem;
  height: 1rem;
  stroke: var(--black-col);
  cursor: pointer;
  position: absolute;
  top: 2rem;
}

.small-gray-dot {
  width: 5px;
  height: 5px;
  background-color: #E5E8F2;
  border-radius: 1rem;
}

.small-vertical-line {
  height: 6rem;
  width: 1px;
  background-color: #F2F3FA;
}

.link-text {
  color: #040919;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-decoration-line: underline;
}

.overflow-x {
  overflow-x: scroll;
}

/*.delete-row-column {
  position: absolute;
  right: -1.2rem;
  border-style: none !important;
  top: 50%;
  transform: translate(0%, -50%);
  display: none;
  &.edit-mode{
    display: block;
  }
}*/
.delete-row-column {
  position: absolute;
  right: 0;
  height: 6.2rem;
  background-color: var(--table-container);
  display: none;
  min-height: 77px;
}
.delete-row-column.edit-mode {
  display: block;
  padding-left: 15px !important;
  position: sticky;
  right: 0;
}
.delete-row-column span {
  position: relative;
  height: 100%;
  display: block;
}

.table-container {
  background: var(--table-container);
  border: 1px solid var(--table-border);
  margin-top: 0.8rem;
  border-radius: 1.8rem;
  min-height: calc(100vh - 29rem);
  position: relative;
}
.table-container.report {
  margin-bottom: 2rem;
}
.table-container.users {
  background: #F1F2F8;
}

.table-horizontal-scroll {
  overflow-x: auto;
  border-top-left-radius: 1.8rem;
  border-top-right-radius: 1.8rem;
  min-height: calc(100vh - 36rem);
  padding-bottom: 1rem;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-horizontal-scroll::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.6rem;
  background-color: transparent;
  border-radius: 0.3rem;
}
.table-horizontal-scroll::-webkit-scrollbar-thumb {
  background: var(--table-h-scrollbar);
  border-radius: 0.3rem;
}

.center-lg-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72% !important;
  margin-top: 3rem;
}

.h-100 {
  height: 100%;
}

#hp-ageing-report .apexcharts-legend-marker {
  display: none !important;
}

.clear-all {
  color: var(--button-text);
  font-family: "DM Sans", sans-serif;
  font-size: 1.3rem;
  opacity: 0.5;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  border-style: none;
  background-color: transparent;
  text-decoration-line: underline;
  margin-right: 1.6rem;
  white-space: nowrap;
  cursor: pointer;
}
@media only screen and (max-width: 64em) {
  .clear-all.aging-report {
    display: none;
  }
}
.clear-all.search-all {
  text-decoration-line: none;
}
@media only screen and (max-width: 48em) {
  .clear-all {
    /* display: none;*/
  }
}

.op-1 {
  opacity: 1;
}

.op-0 {
  opacity: 0;
}

.ws-nowrap {
  white-space: nowrap;
}

@media only screen and (max-width: 48em) {
  .main-sidebar-dropdown {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 37.5em) {
  .main-sidebar-dropdown {
    flex-direction: row;
    align-items: unset;
  }
}

.persuite-dropdown-menu.show {
  display: block;
}

.truncate__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*width: 15rem;*/
  max-width: 15rem;
}
.truncate__email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 20rem;*/
  max-width: 20rem;
  padding-right: 2rem;
}
.truncate__quotationNumber {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 20rem;*/
  max-width: 10rem;
}
.truncate__auto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
}

.pointer-mouse {
  cursor: pointer;
}

.count-box {
  position: absolute;
  top: -8px;
  right: 0px;
  background: #2B449D;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #FFFFFF;
  font-weight: 500;
}

.amount-text-right {
  text-align: right;
  padding-right: 1.8rem !important;
}

/*profile modal*/
.profile-view-modal {
  height: calc(100vh - 7rem);
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-height {
  height: calc(100vh - 19rem);
  overflow-y: auto;
  position: relative;
}

.modal-inputs {
  width: 21rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-description {
  white-space: pre-wrap !important;
  word-break: break-all;
  width: 40rem;
}

/* placeholder text */
.placeholder-text {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  color: #8b8b8b;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  border-bottom: 1px solid transparent;
}

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

.break-word {
  word-break: break-word;
}

.validation-message {
  font-size: 1.4rem;
  color: var(--error-msg);
  display: none;
}

.iserror .validation-message {
  display: block;
}

.cursor-default {
  cursor: default;
}

.dropdown_nodata {
  justify-content: flex-end;
  align-items: center;
  display: none;
  flex-direction: column;
  /* width: 100%; */
  background-image: url(/images/no-data.png);
  height: 15rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: -webkit-fill-available;
}
.dropdown_nodata div {
  font-size: 1.3rem;
  font-weight: 700;
}
.dropdown_nodata.show {
  display: flex;
}

.row-add-button {
  border: 1px solid #A5ABC3;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  color: var(--black-col);
  font-weight: 400;
  cursor: pointer;
  display: none;
  /*    position: absolute;
  right: 0;*/
}
.row-add-button__icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--black-col);
}
.row-add-button__div {
  position: relative;
  height: 5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 1.6rem;
}
.row-add-button span {
  margin-left: 0.5rem;
}
.row-add-button.edit-mode {
  display: flex;
}

.editable-area {
  pointer-events: none;
}
.editable-area.active {
  pointer-events: all;
}

.download-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--primary-col);
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: none;
}
.download-btn__icon {
  stroke: #FFFFFF;
  width: 1.8rem;
}

.text-warning {
  color: #D6A744;
}

.e-template-iframe {
  min-height: 100vh;
  width: 100%;
  border-style: none;
}

.quotation-download-dropdown {
  right: 0;
  top: 4rem;
}

.action-inprogress-btn {
  opacity: 0.4;
  pointer-events: none;
}

.action-inprogress-btn .btn-loader {
  display: inline-block !important;
}

.ellipsis-all {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.pointer {
  cursor: pointer;
}

.page-header__dropdown--menu.report-export-dropdown {
  bottom: -5rem;
}

.kebab-dropdown__container.export-report {
  top: 5rem;
}

.p-sm {
  padding: 2px;
}

.decision-maker-check {
  width: 2rem;
  height: 2rem;
  stroke: var(--status-new-border);
}

.decision-maker-cross {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--status-loss-border);
}

.right-0 {
  right: 0;
}

.left-unset {
  left: unset;
}

.relative-position {
  position: relative;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: var(--apex-tootip-top) !important;
  border-bottom: 1px solid var(--apex--tootip-border) !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
  background: var(--apex-tootip-bg) !important;
  border: 1px solid var(--apex--tootip-border) !important;
}

.w-unset {
  width: unset;
}

.choiceslist--dropdown .choicesitem--selectable.is-highlighted, .choiceslist[aria-expanded] .choicesitem--selectable.is-highlighted {
  background-color: transparent;
}

.choices__input {
  background-color: transparent;
}

.flatpickr-day.flatpickr-disabled {
  color: rgba(104, 104, 104, 0.5411764706);
}

.choices__item[data-select-text]::after {
  display: none !important;
}

.flatpickr-current-month input.cur-year[disabled] {
  color: rgba(133, 133, 133, 0.5019607843);
}

.choices__input::placeholder {
  color: #8b8b8b;
}

.border-one {
  border: 1px solid var(--filter-bar-border);
}

.valid-till-placeholder::placeholder {
  color: var(--button-text);
  font-size: 1.3rem;
  font-style: normal;
}

.table_nodata__text {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2rem 0;
  display: none;
}

.table_nodata {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  flex-direction: column;
  /* width: 100%; */
  background-image: url(/images/no-data.png);
  height: 15rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  width: -webkit-fill-available;
  min-height: unset;
  padding: 1.6rem;
  margin-bottom: 2rem;
}
.table_nodata .table-horizontal-scroll {
  display: none;
}
.table_nodata .table_nodata__text {
  display: block;
}

.mt-m-16 {
  margin-top: -1.6rem;
}

.edit-logs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.edit-logs__icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--black-col);
}

@media only screen and (max-width: 64em) {
  .valid-datpicker {
    display: none;
  }
}

.border-unset {
  border-style: none;
}

.pointer-unset {
  pointer-events: none;
}

.min-height-unset {
  min-height: unset;
}

.table-container.table-noData .main-table {
  display: none;
}
.table-container.table-noData .js-dropdown_nodata {
  display: flex;
}

.pinned-list li {
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%;
  margin-left: 2rem;
  word-break: break-word;
}

.pinned-list li::marker {
  color: #A0CC16;
}

.no-data__charts {
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

.dashbard__reports-head:hover {
  text-decoration: underline;
  text-decoration-color: #2B449D;
}

.no-data-campagin-conversion {
  height: 100%;
}
.no-data-campagin-conversion__skelton {
  justify-content: center;
  width: 100%;
  height: 100%;
  align-items: center;
}

.conversion-rate__boxes .header-8.fw-700 {
  white-space: nowrap;
}

.opacity-5 {
  opacity: 0.5;
}

.show-nodata-img {
  display: flex;
}

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

.mx-height-unset {
  max-height: unset;
}

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

.notification--no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.notification--no-data img {
  width: 12rem;
}
.notification--no-data--text {
  font-size: 1.5rem;
  color: var(--black-col);
  font-weight: 700;
}

.notification-load-more-btn {
  background-color: transparent;
  border-radius: 1.7rem;
  border: 1px solid var(--tab-border);
  color: var(--black-col);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  padding: 0.8rem 1.4rem;
  width: 12rem;
  text-align: center;
}

/*.apexcharts-text {
    width: 1rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}*/
.min-h-15 {
  min-height: 15rem;
}

.lg-elipsis {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 20rem;
  max-width: 20rem;
}

#dashConversionRateChart {
  pointer-events: none !important;
}

.disabeled-btns {
  pointer-events: none;
  opacity: 0.6;
}

.table-date-filter__menu.disabled-filter-menu .table-date-filter__list-menu {
  opacity: 0.5;
  pointer-events: none;
}

.filter-dropdown__content.disabled-filter-menu .filter-dropdown__item {
  opacity: 0.5;
  pointer-events: none;
}

.advanced-filter-dropdown__content.disabled-filter-menu .advanced-filter-dropdown__item {
  opacity: 0.5;
  pointer-events: none;
}

.advanced-filter-dropdown__content.disabled-filter-menu .js-filterdropdown-options {
  opacity: 0.5;
  pointer-events: none;
}

.advanced-filter-dropdown__content.disabled-filter-menu .filter-search-box {
  opacity: 0.5;
  pointer-events: none;
}

.disabled-element {
  pointer-events: none;
  opacity: 0.5;
}

#financialyeargoaltargetrevenue {
  -moz-appearance: textfield;
}

.btn-loader {
  font-size: 1.4rem;
  margin-right: 1rem;
}

.task-edit svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
}

.sticky-action {
  position: sticky;
  right: 0;
  z-index: 11;
  background-color: var(--table-container);
}

.quantity-quotation {
  width: 15rem;
}
.quantity-quotation__input {
  width: 13rem;
}

.discount-quotation {
  width: 8rem;
}
.discount-quotation__input {
  width: 6rem;
}

.price-quotation {
  width: 18rem;
}
.price-quotation__input {
  width: 15rem;
}

.custom-field-elipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 20rem;
  max-width: 20rem;
}

.flex-imp {
  display: flex !important;
}

.tag_product {
  display: flex !important;
}

.no-data-image-box img {
  width: 160px;
}

.default-table-color {
  background-color: var(--card-color);
}

.default-sticky-action-color {
  background-color: var(--card-color);
}

#productmastertablebody .main-table__hover-btns {
  top: -16px;
}

.new-sm-span {
  background: #2B449D;
  color: #fff;
  padding: 2px 6px;
  font-size: 9px;
  width: unset !important;
  text-overflow: unset !important;
  display: inline-block !important;
  border-radius: 7px;
  animation: fadeIn 1s ease-in-out;
}

.pb_6 {
  padding-bottom: 0.6rem;
}

.modal-custom-tooltip {
  position: absolute;
  left: 16rem;
  top: -0.3rem;
  cursor: pointer;
}
.modal-custom-tooltip__icon {
  stroke: #555B6C;
  width: 1.7rem;
  height: 1.7rem;
}

.feedback-center-modal {
  top: 50%;
  left: 50%;
  height: 52rem;
  transform: translate(-50%, -50%);
}

.margin-l-4 {
  margin-left: 4rem;
}

.position-relative {
  position: relative;
}

.width-unset {
  width: unset;
}

.g-authenticator-main {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: center;
  margin: 3rem 0;
}
@media only screen and (max-width: 37.5em) {
  .g-authenticator-main {
    display: block;
  }
}

.authetication-sub-text {
  color: var(--color-black);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}

.reset-authentication {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.qr-img img {
  width: 13rem;
  height: 13rem;
}

@media only screen and (max-width: 37.5em) {
  .qr-img-main {
    flex-direction: column;
  }
}

.authentication-width-adjust {
  width: 62rem;
}
@media only screen and (max-width: 75em) {
  .authentication-width-adjust {
    width: 56rem;
    padding: 6rem 2.6rem;
  }
}

.duplication-info {
  padding: 1.6rem;
  border-radius: 6px;
  border: 1px solid var(--duplication-info-bg);
  background: var(--duplication-info-bg);
  margin-top: 3rem;
}
.duplication-info__icon {
  width: 1.8rem;
  height: 1.8rem;
  fill: transparent;
}
.duplication-info__head {
  color: var(--duplication-info-head);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
}
.duplication-info__desc {
  color: var(--duplication-info-desc);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}

.unset-postion {
  position: unset;
}

.financial-year-container__table td.fw-500 {
  font-weight: 500;
}

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

.resend-otp-btn {
  background: transparent;
  border-style: none;
  text-decoration: underline;
  color: #2B449D;
  cursor: pointer;
}

.product-master-table .table-empty-screen {
  top: 56%;
  left: 56%;
}

.circle-opacity-loader {
  width: 4rem;
  height: 4rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: #263b86;
  --_mask: conic-gradient(from 0turn, transparent 10%, black 10%), linear-gradient(black 0 0) content-box;
  -webkit-mask: var(--_mask);
  mask: var(--_mask);
  -webkit-mask-composite: destination-out;
  mask-composite: subtract;
  animation: circle-opacity 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes circle-opacity {
  100% {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}
.text-color {
  color: var(--black-col) !important;
}

.mt-2rem {
  margin-top: 2rem;
}

@media only screen and (max-width: 90em) {
  .taskpending-report .searchbox {
    width: 26rem;
  }
}
@media only screen and (max-width: 75em) {
  .taskpending-report .searchbox {
    width: 24rem;
  }
}
@media only screen and (max-width: 64em) {
  .taskpending-report .searchbox {
    width: 24rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .taskpending-report .searchbox {
    width: 100%;
  }
}

.profile-edit-save {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.profile-modal-validation {
  position: absolute;
  bottom: -2rem;
}
.profile-modal-validation.bottom-1 {
  bottom: -1rem;
}
.profile-modal-validation__parent {
  position: relative;
  padding-bottom: 2px;
}

.auto-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input-span-mh {
  min-height: 1.9rem;
}

.authorize-btn {
  border: 1px solid #045604;
  color: #045604;
}
.authorize-btn svg {
  stroke: #045604;
}
.authorize-btn:hover {
  border: 1px solid #045604;
}

.reject-btn {
  border: 1px solid #d61717;
  color: #d61717;
}
.reject-btn svg {
  stroke: #d61717;
}
.reject-btn:hover {
  border: 1px solid #d61717;
}

.permission-desc-text {
  margin-top: 2rem;
  color: #727272;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

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

.no-permission-img {
  width: 3rem;
  height: 3rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

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

.coachmark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: none;
}
@media only screen and (max-width: 75em) {
  .coachmark-overlay {
    display: none !important;
  }
}

.coachmark-tooltip h3 {
  margin: 0 0 8px;
  color: var(--tab-color);
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
}

.coachmark-tooltip p {
  margin: 0 0 12px;
  color: var(--tab-color);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
}

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

#coachmark-step {
  color: #525252;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
}

.coachmark-next {
  border-radius: 6px;
  border: 1px solid var(--user-filter-active);
  padding: 1rem;
  background: var(--user-filter-active);
  width: 9rem;
  color: var(--table-container);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
}

.coachmark-next:hover {
  background-color: #253776;
  border: 1px solid #253776;
}

.coachmark-tooltip {
  position: absolute;
  width: 40rem;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid #DEE2E6;
  background: #FFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 5px 3px 16px 0 rgba(198, 198, 198, 0.31);
  z-index: 10000;
  top: 22rem;
  left: 138.1rem;
}
@media only screen and (max-width: 75em) {
  .coachmark-tooltip {
    display: none !important;
  }
}

.coachmark-tooltip::before {
  content: "";
  position: absolute;
  top: -2%;
  right: -121px;
  transform: translateY(-50%);
  width: 121px;
  height: 184px;
  background-image: url("../../images/arrow-up.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.coachmark-tooltip.coachmark-home {
  top: 15rem;
  left: 30.1rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-home {
    top: 16rem;
    left: 31.5rem;
  }
}

.coachmark-tooltip.coachmark-home::before {
  left: -121px;
  background-image: url("../../images/arrow-left.png");
}

.coachmark-tooltip.coachmark-leads {
  left: 36rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-leads {
    top: 16rem;
    left: 38rem;
  }
}

.coachmark-tooltip.coachmark-leads::before {
  left: -121px;
  background-image: url("../../images/arrow-left.png");
}

.coachmark-tooltip.coachmark-opportunities {
  left: 45rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-opportunities {
    top: 16rem;
    left: 47rem;
  }
}

.coachmark-tooltip.coachmark-opportunities::before {
  left: -121px;
  background-image: url("../../images/arrow-left.png");
}

.coachmark-tooltip.coachmark-quotations {
  left: 57rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-quotations {
    left: 58rem;
  }
}

.coachmark-tooltip.coachmark-quotations::before {
  left: -121px;
  background-image: url("../../images/arrow-left.png");
}

.coachmark-tooltip.coachmark-campaigns {
  left: 67rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-campaigns {
    left: 68rem;
  }
}

.coachmark-tooltip.coachmark-campaigns::before {
  left: -121px;
  background-image: url("../../images/arrow-left.png");
}

.coachmark-tooltip.coachmark-reports {
  left: 76rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-reports {
    left: 77.5rem;
  }
}

.coachmark-tooltip.coachmark-reports::before {
  left: -121px;
  background-image: url("../../images/arrow-left.png");
}

.coachmark-tooltip.coachmark-settings {
  left: 85rem;
}
@media only screen and (max-width: 90em) {
  .coachmark-tooltip.coachmark-settings {
    left: 85.5rem;
  }
}

.coachmark-tooltip.coachmark-filter-options {
  top: 26rem;
  left: 110rem;
}
@media only screen and (max-width: 112.5em) {
  .coachmark-tooltip.coachmark-filter-options {
    top: 27rem;
    left: 100.5rem;
  }
}
@media only screen and (max-width: 106.25em) {
  .coachmark-tooltip.coachmark-filter-options {
    left: 70rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .coachmark-tooltip.coachmark-filter-options {
    left: 55rem;
  }
}
@media only screen and (max-width: 75em) {
  .coachmark-tooltip.coachmark-filter-options {
    left: 37rem;
  }
}

.coachmark-tooltip.coachmark-filter-options::before {
  top: 4%;
}

.coachmark-tooltip.coachmark-columns-button {
  top: 28rem;
  left: 130rem;
}
@media only screen and (min-width: 78.75em) and (max-width: 81.875em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 28rem;
    left: 81rem;
  }
}
@media only screen and (min-width: 75.0625em) and (max-width: 78.6875em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 28rem;
    left: 75rem;
  }
}
@media only screen and (min-width: 81.9375em) and (max-width: 85.4375em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 28rem;
    left: 88rem;
  }
}
@media only screen and (min-width: 85.5em) and (max-width: 95.125em) {
  .coachmark-tooltip.coachmark-columns-button {
    left: 87rem;
    top: 28rem;
  }
}
@media only screen and (min-width: 86.5em) and (max-width: 90em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 28rem;
    left: 94rem;
  }
}
@media only screen and (min-width: 95.1875em) and (max-width: 99.1875em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 27rem;
    left: 95rem;
  }
}
@media only screen and (min-width: 99.25em) and (max-width: 103.125em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 27rem;
    left: 101rem;
  }
}
@media only screen and (min-width: 99.3125em) and (max-width: 106.6875em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 27rem;
    left: 104rem;
  }
}
@media only screen and (min-width: 106.75em) and (max-width: 117.125em) {
  .coachmark-tooltip.coachmark-columns-button {
    top: 27rem;
    left: 113rem;
  }
}

.coachmark-tooltip.coachmark-columns-button-oppurtunity {
  top: 29rem;
  left: 130rem;
  top: 28rem;
  left: 130rem;
}
@media only screen and (min-width: 78.75em) and (max-width: 81.875em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 28rem;
    left: 81rem;
  }
}
@media only screen and (min-width: 75.0625em) and (max-width: 78.6875em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 28rem;
    left: 75rem;
  }
}
@media only screen and (min-width: 81.9375em) and (max-width: 85.4375em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 28rem;
    left: 88rem;
  }
}
@media only screen and (min-width: 85.5em) and (max-width: 95.125em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    left: 87rem;
    top: 28rem;
  }
}
@media only screen and (min-width: 86.5em) and (max-width: 90em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 28rem;
    left: 94rem;
  }
}
@media only screen and (min-width: 95.1875em) and (max-width: 99.1875em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 27rem;
    left: 95rem;
  }
}
@media only screen and (min-width: 99.25em) and (max-width: 103.125em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 27rem;
    left: 101rem;
  }
}
@media only screen and (min-width: 99.3125em) and (max-width: 106.6875em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 27rem;
    left: 104rem;
  }
}
@media only screen and (min-width: 106.75em) and (max-width: 117.125em) {
  .coachmark-tooltip.coachmark-columns-button-oppurtunity {
    top: 27rem;
    left: 113rem;
  }
}

.coachmark-tooltip.coachmark-sales-pipeline {
  top: 40rem;
  left: 44rem;
}

.coachmark-tooltip.coachmark-filter-options-oppurtunity {
  top: 26rem;
  left: 110rem;
}
@media only screen and (max-width: 112.5em) {
  .coachmark-tooltip.coachmark-filter-options-oppurtunity {
    top: 27rem;
    left: 100.5rem;
  }
}
@media only screen and (max-width: 106.25em) {
  .coachmark-tooltip.coachmark-filter-options-oppurtunity {
    left: 70rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .coachmark-tooltip.coachmark-filter-options-oppurtunity {
    left: 55rem;
  }
}
@media only screen and (max-width: 75em) {
  .coachmark-tooltip.coachmark-filter-options-oppurtunity {
    left: 37rem;
  }
}

.coachmark-tooltip.coachmark-filter-options-oppurtunity::before {
  top: 4%;
}

.coachmark-tooltip.coachmark-quotation-stage {
  top: 42rem;
  left: 61rem;
}

.coachmark-tooltip.coachmark-planned-revenue {
  top: 41rem;
  left: 102rem;
  width: 48rem;
}
@media only screen and (max-width: 100em) {
  .coachmark-tooltip.coachmark-planned-revenue {
    top: 37rem;
    left: 84rem;
  }
}

.coachmark-tooltip.coachmark-planned-revenue::before {
  background-image: url("../../images/left-line.png");
  left: -121px;
  top: 52%;
}

.coachmark-tooltip.coachmark-campaign-status::before {
  left: -121px;
  top: 9rem;
  background-image: url("../../images/left-line.png");
}

.coachmark-tooltip.coachmark-campaign-status {
  top: 19rem;
  left: 46.1rem;
}
@media only screen and (max-width: 106.25em) {
  .coachmark-tooltip.coachmark-campaign-status {
    left: 41rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .coachmark-tooltip.coachmark-campaign-status {
    left: 39rem;
  }
}

.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

.coach-mark-skip {
  margin: 0 0 8px;
  background: transparent;
  width: 9rem;
  color: #7C849C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

.coachmark-title-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.current-quotataion {
  margin-bottom: 2rem;
}
.current-quotataion__text {
  color: var(--black-col);
  font-weight: 400;
}
.current-quotataion__version {
  color: var(--color-blue-white);
  font-weight: 700;
  padding: 4px;
  border-radius: 3rem;
  /*margin-left: 0.6rem;*/
  font-size: 1.3rem;
}

.non-editable {
  pointer-events: none;
}

.quotation-table-wrapper {
  margin-bottom: 16rem;
}

.quotation-table-oveflow {
  padding-bottom: 14rem;
}

.table-select-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.table-select-loading__img {
  width: 4rem;
  height: auto;
}

#quotInfo_progressbar_acceptedrejected_text {
  min-height: 4rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.send-for-approval {
  font-size: 1.4rem;
  padding: 4px 16px;
  border-radius: 3rem;
  font-weight: 500;
  border: 1px solid var(--border-approval);
  background-color: var(--approval-bg);
  color: var(--black-col);
  width: max-content;
}

.sent-to-client {
  font-size: 1.4rem;
  padding: 4px 16px;
  border-radius: 3rem;
  font-weight: 500;
  border: 1px solid var(--border-sent);
  background-color: var(--sent-bg);
  color: var(--black-col);
  width: max-content;
}

.admin-rejected {
  font-size: 1.4rem;
  padding: 4px 16px;
  border-radius: 3rem;
  font-weight: 500;
  border: 1px solid var(--status-rejected-color);
  background: var(--status-rejected-border);
  color: var(--black-col);
  width: max-content;
}

.not-accepted {
  font-size: 1.4rem;
  padding: 4px 16px;
  border-radius: 3rem;
  font-weight: 500;
  border: 1px solid #610000;
  background: rgba(201, 0, 0, 0.3411764706);
  color: var(--black-col);
  width: max-content;
}

.external-link-icon {
  fill: var(--black-col);
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.5rem;
}

.quotation-price-tooltip {
  width: 20rem;
  display: block;
  white-space: break-spaces;
}

.last-quotation-column {
  display: flex;
  flex: 1;
}

.no-items-quotaion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}

.no-items-quotaion img {
  width: 120px;
}

.no-items-quotaion span {
  margin-top: -20px;
}

.last-update-box {
  width: 12rem;
  padding: 0.4rem 0;
  text-align: center;
  color: var(--black-col);
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 2rem;
  border: 1px solid var(--status-done-border);
  background-color: var(--status-done-color);
}

.pb--6 {
  padding-bottom: 6rem;
}

.custom-details-selected-placeholder {
  color: var(--black-col);
}
.custom-details-selected-placeholder.color-placeholder-text {
  color: #8b8b8b;
}

.modal-select-loss {
  width: 100%;
  border-style: none;
  border-bottom: 1px solid var(--custom-input-border);
  outline: none;
  height: 2rem;
  background-color: transparent;
  color: var(--black-col);
  color: var(--black-col);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  resize: none;
  font-size: 1.5rem;
}

.modal-close-btn-loss {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
}

.modal-close-btn-loss:hover {
  color: #333;
}

.modal__content-loss {
  position: relative;
  background-color: var(--modal-bg);
  border-radius: 1.8rem;
}

.cursor-pointer {
  cursor: pointer;
}

.tags-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tags-select-subtext {
  font-size: 12px;
  color: cornflowerblue;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tags-select-check-icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--black-col);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}

.mark-as-done-sticky {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modal-select-loss {
  background-color: var(--card-color);
}

.modal-close-btn-loss {
  stroke: var(--black-col);
}

.pb-6-rem {
  padding-bottom: 6rem;
}

.dropdown-product-category {
  font-size: 12px;
  color: cornflowerblue;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-details-dropdown li {
  padding: 0.5rem;
}

.mini-toggle {
  display: flex;
  align-items: center;
  width: 70px;
  height: 28px;
  border-radius: 30px;
  background: #eef2ff;
  padding: 3px;
  gap: 3px;
}

.mini-toggle .mini-option {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  color: #555;
  font-size: 14px;
}

.mini-toggle .mini-option.active {
  background: #cdd7ff;
  color: #1c1c51;
  font-weight: 600;
}

.deal-card__footer-user {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

.deal-card__footer-user.has-image {
  background-color: transparent !important;
}

.deal-card__footer-user-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

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

.deal-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  height: 30px;
}

.deal-card.priority-high::before {
  background-color: #ff4d4f;
}

.deal-card.priority-medium::before {
  background-color: #ffa940;
}

.deal-card.priority-low::before {
  background-color: #1890ff;
}

/*# sourceMappingURL=main.css.map */