a,
button,
input,
label,
select,
textarea,
.socialLogin li,
.expander,
.leftNav,
.leftNav .companyList li::before,
.leftNav .companyList li img,
.material-icons-outlined,
.secondPanel,
.mainContent,
.pwStrength em,
.itemList li,
.notiNumber,
.fileReqDesc,
.cancelBtn,
.overlay,
.btnStyle1,
.btnStyle2,
.btnStyle3,
.btnStyle4,
.btnStyle5,
.disabledBtn .leftNav .companyList li .noLogo,
.leftProgressWrap,
.statusCard,
.projectView tr,
.rightProgressHeader,
tr.not-empty::after,
.actionBtnSec > li button::after,
.memberInviteTable td:nth-child(3) .deleteBin,
.taskCardViewItem,
.taskCardViewItem .taskNameWrap .taskName ~ span.actionIons,
.uploadLogoLeft .deleteProfileImg,
.stageItemWrapper span.deleteBin,
.leftProgressWrap:hover span.deleteBin,
.leftNav .companyList li .noLogo,
.memberInviteTable table span.cmnIcon.deleteBin,
.showTaskPanel .taskName:hover ~ .customTooltip,
.messageItem,
.messageDetailsInfo .sampleFile {
  transition: all 0.3s;
}

.websiteColors {
  --cs-primary-a: #2e364c;
  --cs-primary-b: rgba(46, 54, 74, 0.7);
  --cs-secondary-a: #ef4c5c;
  --cs-secondary-b: #4b8dff;
  --cs-background: #fff;

  --cs-panel-grd-bg: linear-gradient(
    180deg,
    var(--cs-dark-01) 0%,
    var(--cs-primary-b) 100%
  );
  --cs-shadow: 0px 2px 4px rgba(58, 58, 68, 0.2),
    0px 4px 8px rgba(90, 91, 106, 0.2);

  --cs-light-01: #e4e1e6;
  --cs-light-02: #eeecf1;
  --cs-light-03: #fff;
  --cs-light-04: #f0f0f0;
  --cs-light-05: #f5f5f5;

  --cs-light-05-alpha20: rgba(255, 255, 255, 0.2);

  --cs-dark-01: #2e364c;
  --cs-dark-02: #979797;
  --cs-dark-03: #747988;
  --cs-error: #ff5449;
  --cs-error-bg: #ffe7e9;
  --cs-error-border: #ffa690;
  --cs-success: #23d100;
  --cs-success-bg: #eafae6;
  --cs-success-border: #a8ea97;
  --cs-dark-04: #bdbdbd;
  --cs-medium: #ffae51;
  --cs-medium-bg: #fff4e4;
  --cs-medium-border: #ffd093;

  --cs-placeholder: #c8c5ca;
  --cs-neutral: #78767a;
  --cs-neutral2: #fff8ec;
  --cs-blocker: #ba1a1a;
  --cs-color-done: #13854e;
  --cs-progress: #ef4c5c;
  --cs-progressCardBorder: #f3f0f4;
  --cs-status-done: #dcf3eb;
  --cs-status-overdue: #ffdad6;
  --cs-filter-label: #151b26;
  --cs-createFolder-bg: #faf9fe;
  --cs-CNPscreen-star: #e3e3e3;
  --cs-del-project: #de3730;
  --cs-periwinkle: #f2effd;
  --cs-label: #384860;
  --cs-subheading-desc: #5f5e62;
  --cs-error-bg-light: #fff1f1;
  --cs-secondary-light: #ffebc5;
  --cs-connected-accounts-border: #edebe9;
  --cs-black: #000;
  --cs-active: #34a770;
  --cs-active-hover: #49454f;
  --cs-resend: #929094;
  --radio-header-body-divider: #f2efe8;
  --msg-due-date: #acaaaf;
  --cs-logo-grad: linear-gradient(
    90deg,
    #ee4b5c 19%,
    #fa9b47 74%,
    #ffbc3f 100%
  );
  --cs-messagelist-bg: #fffbff;
}

.websiteLayout {
  --cs-site-logo: url(../images/site-logo.svg);
  --teamTypeStep: url(../images/onboarding-step-1.svg);
  --teamInfoStep: url(../images/onboarding-step-2.svg);
  --profileInfoStep: url(../images/onboarding-step-3.svg);

  --section-gap: 50px;
  --wrapper-gap: 30px;
  --just-beneath-nav: 40px;
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 4px;
  --radius-4: 8px;
  --radius-5: 2px;
  --radius-round: 100px;
  --shadow-1: 0 0 10px rgba(0, 0, 0, 0.2);
  --radius-50: 50%;
  --col-pad-1: 0 12px;
  --row-pad: 0 -12px;
  --cs-planner: url(../images/icon-planner.svg);
  --cs-addCompany: url(../images/add-company.svg);
  --cs-notification: url(../images/notification.svg);
  --cs-user: url(../images/user.svg);
  --cs-search: url(../images/search.svg);
  --cs-dashboard: url(../images/dashboard.svg);
  --cs-dashboard-planner: url(../images/dashboard-planner.svg);
  --cs-chat: url(../images/chat.svg);
  --cs-arrowDown: url(../images/arrow-down.svg);
  --cs-layers: url(../images/layers.svg);
  --cs-arrowRight: url(../images/arrow-right.svg);
  --cs-addPlus: url(../images/add-plus.svg);
  --cs-settings: url(../images/settings.svg);
  --cs-logOut: url(../images/logout.svg);
  --cs-dashboard-white: url(../images/dashboard-white.svg);
  --cs-dashboard-planner-white: url(../images/dashboard-planner-white.svg);
  --cs-chat-white: url(../images/chat-white.svg);
  --cs-layers-white: url(../images/layers-white.svg);
  --cs-layers-blue: url(../images/layers-blue.svg);
  --cs-layers-green: url(../images/layers-green.svg);
  --cs-tasktype-thumbnail: url(../images/dummy-icon.svg);
  --cs-search: url(../images/search.svg);
  --cs-star: url(../images/star.svg);
  --cs-check: url(../images/check.svg);
  --cs-filter: url(../images/filter.svg);
  --cs-more: url(../images/more.svg);
  --cs-task-field: url(../images/task-field.svg);
  --cs-hoverShade-1: #dbe8ff;
  --cs-manage-task: url(../images/manage-task.svg);
  --cs-hover-check: url(../images/hover-check.svg);
  --cs-arrow-down: url(../images/arrow-white.svg);
  --cs-arrow-dropdown: url(../images/arrow-dropdown.svg);
  --cs-arrow-up: url(../images/arrowUp.svg);
  --cs-todo: url(../images/to-do.svg);
  --cs-assign: url(../images/assign.svg);
  --cs-calendar: url(../images/calendar.svg);
  --cs-priority: url(../images/priority.svg);
  --cs-unassign: url(../images/unassign.svg);
  --cs-high-priority: url(../images/high-priority.svg);
  --cs-medium-priority: url(../images/medium-priority.svg);
  --cs-low-priority: url(../images/low-priority.svg);
  --cs-message: url(../images/message.svg);
  --cs-grid-list: url(../images/grid-list.svg);
  --cs-memo-pad: url(../images/memo-pad.svg);
  --cs-profile-setting: url(../images/profile-setting.svg);
  --cs-manage-team: url(../images/manage-team.svg);
  --cs-help: url(../images/help.svg);
  --cs-privacy-policy: url(../images/privacy-policy.svg);
  --cs-user-solid: url(../images/user-solid.svg);
  --cs-blocked: url(../images/blocked.svg);
  --cs-overdue: url(../images/overdue.svg);
  --cs-done: url(../images/done.svg);
  --cs-statusDone: url(../images/statusDone-filled.svg);
  --cs-drag-icon: url(../images/drag.svg);
  --cs-phone: url(../images/member-phone.svg);
  --cs-textIcon: url(../images/member-msg.svg);
  --cs-grid-card: 80px;
  --cs-edit: url(../images/edit.svg);
  --cs-clone: url(../images/clone.svg);
  --cs-delete-bin: url(../images/delete-bin.svg);
  --cs-folder: url(../images/add-folder.svg);
  --cs-cancel: url(../images/cancel.svg);
  --cs-drag: url(../images/drag.svg);
  --cs-lock: url(../images/lock.svg);
  --cs-blueIcon-more: url(../images/blue-more.svg);
  --cs-sub-arrow: url(../images/chevron-right.svg);
  --cs-unlock: url(../images/unlock.svg);
  --cs-rename: url(../images/rename.svg);
  --cs-add-sec: url(../images/addSec.svg);
  --cs-sec-above: url(../images/secAbove.svg);
  --cs-sec-down: url(../images/secDown.svg);
  --cs-more-vertical: url(../images/more-vertical.svg);
  --cs-popover: url(../images/popover-after.svg);
  --cs-favorite: url(../images/filledStar.svg);
  --cs-unfavorite: url(../images/unfilledStar.svg);
  --cs-left-arrow: url(../images/left-arrow.svg);
  --cs-logo-default: url(../images/LogoDefault.svg);
  --cs-sun: url(../images/sun.svg);
  --cs-moon: url(../images/moon.svg);
  --cs-close-icon: url(../images/close-icon.svg);
  --cs-done-sticker: url(../images/done-sticker.svg);
  --cs-blocked-sticker: url(../images/blockedSticker.svg);
  --cs-due-sticker: url(../images/dueSticker.svg);
  --cs-todo-sticker: url(../images/todoSticker.svg);
  --cs-delete-bin: url(../images/delete-bin.svg);
  --cs-link: url(../images/link-to.svg);
  --cs-card-view: url(../images/card-view.svg);
  --cs-customize: url(../images/customize.svg);
  --cs-doubleSortArrow: url(../images/doubleSortArrow.svg);
  --cs-edit-task: url(../images/edit-task.svg);
  --cs-delete-task: url(../images/delete-task.svg);
  --cs-addSection: url(../images/plusIcon.svg);
  --cs-moveToTop: url(../images/move-to-top.svg);
  --cs-moveToBottom: url(../images/move-to-bottom.svg);
  --cs-moveTop: url(../images/move-bottom.svg);
  --cs-moveBottom: url(../images/move-top.svg);

  --checkItem: url(../images/checkItem.svg);
  --credit-card: url(../images/credit-card.svg);
  --back-icon: url(../images/backIcon.svg);
  --cs-signUp: url(../images/sign-up-side-img-default.png);
  --cs-login: url(../images/login-img-default.png);
  --cs-zoom-in: url(../images/zoom-in.svg);
  --cs-zoom-out: url(../images/zoom-out.svg);
  --cs-delete-bin-white: url(../images/delete-bin-white.svg);
  --cs-chevron-up: url(../images/chevron-up.svg);
  --cs-chevron-down: url(../images/chevron-down.svg);
  --cs-save-task: url(../images/saveTask.svg);
  --cs-close-task: url(../images/closeTask.svg);
  --cs-emoji: url(../images/emoji.svg);
  --cs-at-the-rate: url(../images/atTheRate.svg);
  --cs-send: url(../images/Send.svg);
  --cs-top-left-corner: url(../images/top-left-calendar-bg.svg);
  --cs-table-view: url(../images/table-view.svg);
  --cs-double-stroke: url(../images/doubleStroke.svg);
  --cs-hideDoneTask: url(../images/hideDoneTask.svg);
  --cs-tasktype-thumbnail-1: url(../images/tasktype-thumbnail-1.svg);
  --cs-tasktype-thumbnail-2: url(../images/tasktype-thumbnail-2.svg);
  --cs-tasktype-thumbnail-3: url(../images/tasktype-thumbnail-3.svg);
  --cs-add-company-under-dev: url(../images/add-company-under-dev.svg);
  --cs-delete-universal: url(../images/delete-project.svg);
  --cs-tooltip-bg: url(../images/tooltip-bg.svg);
  --cs-search-light: url(../images/search-light.svg);
  --cs-pinned: url(../images/pinned.svg);
  --cs-unpinned: url(../images/unpinned.svg);
  --cs-pdf-file-icon: url(../images/pdf-file-icon.svg);
  --cs-xl-file-icon: url(../images/xl-file-icon.svg);
  --cs-attachment: url(../images/attachment.svg);
  --cs-user-light: url(../images/user-light.svg);
  --cs-launching-soon: url(../images/launching-soon-right.svg);
  --cs-half-circle: url(../images/half-circle.svg);
  --cs-stars: url(../images/stars.svg);
  --cs-right-arrow: url(../images/right-arrow.svg);
  --cs-calender-planner: url(../images/planner-calendar-icon.svg);
  --cs-sticker-icon: url(../images/stickerIcon.svg);
  --cs-sticky-note: url(../images/noteIcon.svg);
  --cs-launching-soon-mobile: url(../images/launching-soon-right-mobile.svg);
}

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

.textMuted {
  color: var(--cs-dark-04);
}

.websiteFonts {
  --cs-font-1: "Inter", sans-serif;
  --cs-heading-2: 1.125rem;
  --cs-heading-3: 1rem;
  --cs-heading-4: 0.875rem;
  --cs-body-font: 0.875rem;
}

html {
  -webkit-text-size-adjust: 100%;
}

.scOff {
  max-height: 100vh;
  overflow: hidden;
}

body {
  background: var(--cs-background);
  color: var(--cs-primary-a);
  font-family: var(--cs-font-1);
  font-size: var(--cs-body-font);
  line-height: 1.5;
  word-break: break-word;
  font-weight: 400;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 30px var(--cs-light-04) inset !important;
  -webkit-box-shadow: 0 0 0 30px var(--cs-light-04) inset !important;
  -webkit-text-fill-color: var(--cs-primary-a) !important;
}

input,
textarea,
select {
  width: 100%;
  display: block;
  font-size: inherit;
  line-height: 24px;
  outline: none;
  font-family: inherit;
  font-weight: inherit;
  border-radius: var(--radius-1);
  padding: 11px 12px;
  margin: 0;
  background-color: var(--cs-background);
  border: 1px solid var(--cs-light-01);
  color: var(--cs-primary-a);
}

input:disabled,
textarea:disabled,
select:disabled,
.loginBlk .fldWrap input:disabled ~ label,
.editableFields .fldWrap input:disabled ~ label {
  background-color: var(--cs-light-05);
  border-color: var(--cs-light-02);
  color: var(--cs-dark-02);
  cursor: not-allowed;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  background-color: var(--cs-background);
  border-color: var(--cs-primary-b);
  color: var(--cs-primary-a);
}

textarea {
  height: 100px;
  resize: none;
  max-width: 100%;
}

select {
  -webkit-appearance: none;
  padding-right: 26px;
  background: var(--cs-background) url(../images/icon-arrow-down.svg) no-repeat
    calc(100% - 10px) center / 10px;
}

/*Static Icons*/
.planner {
  background: var(--cs-planner) no-repeat center center / 60px;
}

.stickerIcon {
  background: var(--cs-sticker-icon) no-repeat center center / 32px;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.noteIcon {
  background: var(--cs-sticky-note) no-repeat center center / 32px;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.addCompanyIcon {
  background: var(--cs-addCompany) no-repeat center center / 20px;
  height: 100%;
  width: 100%;
}

.notification {
  background: var(--cs-notification) no-repeat center center / 18px;
  width: 22px;
  height: 20px;
}

.person {
  background: var(--cs-user) no-repeat center center / 18px;
  width: 20px;
  height: 20px;
}

.search {
  background: var(--cs-search) no-repeat center center / 18px;
  width: 20px;
  height: 20px;
}

.sidePanelIcon,
.cmnIcon {
  background: no-repeat center center / 23px;
  width: 23px;
  height: 23px;
  display: block;
}

.cmnIcon.done {
  width: 18px;
  height: 18px;
}

.sidePanelIcon.dashboard {
  background-image: var(--cs-dashboard);
}

.sidePanelIcon.chevron-up {
  background-image: var(--cs-chevron-up);
}
.sidePanelIcon.chevron-down {
  background-image: var(--cs-chevron-down);
}

.sidePanelIcon.dashboard-planner {
  background-image: var(--cs-dashboard-planner);
}

.sidePanelIcon.chat {
  background-image: var(--cs-chat);
}

.cmnIcon.zoomOutBtn {
  background-image: var(--cs-zoom-out);
}

.cmnIcon.zoomInBtn {
  background-image: var(--cs-zoom-in);
}

.sidePanelIcon.arrow-down {
  background-image: var(--cs-arrowDown);
}

.layers {
  background-image: var(--cs-layers);
}

.favorited {
  background-image: var(--cs-favorite);
}

.edit-task {
  background-image: var(--cs-edit-task);
}

.save-task {
  background-image: var(--cs-save-task);
}
.close-task {
  background-image: var(--cs-close-task);
}

.delete-task {
  background-image: var(--cs-delete-task);
}

.checkItem {
  background-image: var(--cs-checkItem);
}

.unfavorited {
  background-image: var(--cs-unfavorite);
}

.leftArrow {
  background-image: var(--cs-left-arrow);
  background-size: 13px;
}

.rightArrow {
  background-image: var(--cs-right-arrow);
  background-size: 13px;
}

.logoDefault {
  background: var(--cs-logo-default) no-repeat center center / 100%;
  width: 195px;
  height: 40px;
  display: block;
  cursor: default;
}

.pinned {
  background: var(--cs-pinned);
}
.unpinned {
  background: var(--cs-unpinned);
}

.favStar {
  width: 19px;
  height: 19px;
  background-size: 19px;
  opacity: 0;
  background-position: center -1px;
}

#wrapperul > li .itemNameBlk,
#wrapperul > li li .itemNameBlk:hover .favStar,
#wrapperul > li .itemNameBlk:hover .favStar {
  opacity: 1;
}

.sidePanelIcon.arrow-right {
  background-image: var(--cs-arrowRight);
}

.addplus {
  background: var(--cs-secondary-a) var(--cs-addPlus) no-repeat center center /
    8px;
  width: 6px;
  height: 6px;
  padding: 8px;
  border-radius: var(--radius-50);
}

.cmnIcon.settings {
  background-image: var(--cs-settings);
}

.cmnIcon.closeIconn {
  background-image: var(--cs-close-icon);
  background-size: 14px;
  cursor: pointer;
}

.cmnIcon.logOut {
  background-image: var(--cs-logOut);
}

.cmnIcon.profile-setting {
  background-image: var(--cs-profile-setting);
}

.cmnIcon.manage-team {
  background-image: var(--cs-manage-team);
}

.cmnIcon.privacy-policy {
  background-image: var(--cs-privacy-policy);
}

.cmnIcon.help {
  background-image: var(--cs-help);
}

.subArrow {
  background-image: var(--cs-sub-arrow);
}

.unlock {
  background-image: var(--cs-unlock);
  background-size: 19px;
}

.moveTop {
  background-image: var(--cs-moveTop);
}

.moveBottom {
  background-image: var(--cs-moveBottom);
}

.moveToTop {
  background-image: var(--cs-moveToTop);
}

.moveToBottom {
  background-image: var(--cs-moveToBottom);
}

.addSection {
  background-image: var(--cs-addSection);
}

.rename {
  background-image: var(--cs-rename);
}

.addSec {
  background-image: var(--cs-add-sec);
}

.statusSticker {
  width: 56px;
  height: 40px;
  background: no-repeat center center/65px;
  margin-top: 8px;
}

.doneSticker {
  background-image: var(--cs-done-sticker);
}

.blockedSticker {
  background-image: var(--cs-blocked-sticker);
}

.dueSticker {
  background-image: var(--cs-due-sticker);
}

.todoSticker {
  background-image: var(--cs-todo-sticker);
}

.secAbove {
  background-image: var(--cs-sec-above);
}

.secDown {
  background-image: var(--cs-sec-down);
}

.leftNav .siteLogo span,
.collapsedSecondPanel .siteLogo span {
  background: var(--cs-site-logo) no-repeat center center / 40px;
  width: auto;
  height: 100%;
  display: block;
}

.expander.collapsedExp ~ .secondPanel li:not(.active-project) .dashboard {
  background-image: var(--cs-dashboard-white);
}

.expander.collapsedExp
  ~ .secondPanel
  li:not(.active-project)
  .sidePanelIcon.dashboard-planner {
  background-image: var(--cs-dashboard-planner-white);
}

.expander.collapsedExp ~ .secondPanel li:not(.active-project) .chat {
  background-image: var(--cs-chat-white);
}

.expander.collapsedExp ~ .secondPanel .layers {
  background-image: var(--cs-layers-white);
}

.expander.collapsedExp ~ .secondPanel .active-project .layers {
  background-color: var(--cs-hoverShade-1);
  height: 30px;
  width: 30px;
  border-radius: var(--radius-50);
  border: 1px solid var(--cs-hoverShade-1);
  background-image: var(--cs-layers-blue);
}

.expander.collapsedExp ~ .secondPanel .active-project:after {
  display: none;
}

li.active-project {
  position: relative;
}

li.parentli.independent-project .haveSubItem,
li.parentli .haveSubItem,
li.parentli .haveSubItem ~ ul li,
.itemList.defaultItemList li {
  padding: 5px 10px;
  border-radius: 40px;
}
li.parentli.independent-project.active-project .haveSubItem,
li.parentli .haveSubItem ~ ul .active-project,
.itemList.defaultItemList li.active-project {
  background: #dbe8ff;
}

.createCard .icon {
  background: var(--cs-delete-universal) no-repeat center center / auto;
  width: 210px;
  height: 120px;
  text-align: center;
  margin: auto auto 20px auto;
}
.createCard.taskList .icon {
  background: var(--cs-tasktype-thumbnail-1) no-repeat center center / 120px;
}
.createCard.gridList .icon {
  background: var(--cs-tasktype-thumbnail-2) no-repeat center center / 120px;
}
.createCard.memoPad .icon {
  background: var(--cs-tasktype-thumbnail-3) no-repeat center center / 130px;
}

.companyHeadingPanel .iconList > * {
  cursor: pointer;
}

.cmnIcon.star {
  background-image: var(--cs-star);
}

.cmnIcon.check {
  background-image: var(--cs-check);
}
.cmnIcon.hideDoneTask {
  background-image: var(--cs-hideDoneTask);
}

.cmnIcon.filter {
  background-image: var(--cs-filter);
}

.cmnIcon.more {
  background-image: var(--cs-more);
}

.taskField {
  background: var(--cs-task-field) no-repeat center center / 20px;
}

.manage-task {
  background: var(--cs-manage-task) no-repeat center center / 20px;
}

.cmnIcon.text {
  background-image: var(--cs-textIcon);
}

.cmnIcon.phone {
  background-image: var(--cs-phone);
}

.edit {
  background: var(--cs-edit) no-repeat center center / 20px;
}

.pencil {
  background: var(--cs-pencil) no-repeat center center / 20px;
}

.clone {
  background: var(--cs-clone) no-repeat center center / 20px;
}

.cardView {
  background: var(--cs-card-view) no-repeat center center / 20px;
}

.tableView {
  background: var(--cs-table-view) no-repeat center center / 20px;
}

.customize {
  background: var(--cs-customize) no-repeat center center / 20px;
}

.deleteBin {
  background: var(--cs-delete-bin) no-repeat center center / 20px;
  cursor: pointer;
}

.cmnIcon.deleteBinWhite {
  background: var(--cs-delete-bin-white) no-repeat center center / 20px;
}

.linkToOtherPage {
  background: var(--cs-link) no-repeat center center / 20px;
}

.emoji {
  background: var(--cs-emoji) no-repeat center center / 20px;
}
.atTheRate {
  background: var(--cs-at-the-rate) no-repeat center center / 20px;
}

.attachment {
  background: var(--cs-attachment) no-repeat center center / 20px;
}

.userLight {
  background: var(--cs-user-light) no-repeat center center / 20px;
}

.send {
  background: var(--cs-send) no-repeat center center / 20px;
}

.lock {
  background-image: var(--cs-lock);
  background-size: 19px;
}

.blueMore {
  background-image: var(--cs-blueIcon-more);
  background-size: 19px;
}
.col-lg-12 {
  width: 100%;
  padding: var(--col-pad-1);
}

.col-lg-9 {
  width: 66.66%;
  padding: var(--col-pad-1);
}

.col-lg-8 {
  width: 75%;
  padding: var(--col-pad-1);
}

.col-lg-6 {
  width: 50%;
  padding: var(--col-pad-1);
}

.col-lg-4 {
  width: 25%;
  padding: var(--col-pad-1);
}

.col-lg-3 {
  width: 33.33%;
  padding: var(--col-pad-1);
}

.row,
.d-flex {
  display: flex;
}

.fldMsg {
  font-size: 0.75rem;
}

.fldError {
  border-color: var(--cs-error);
  color: var(--cs-error);
}

.fldError:focus {
  border-color: var(--cs-error);
}

.msgError {
  display: block;
  font-size: 0.75rem;
  color: var(--cs-error);
  margin-top: 2px;
}

.errorColor,
.requiredTxt {
  color: var(--cs-error);
}

.successColor {
  color: var(--cs-success);
}

button {
  font-family: inherit;
  outline: none;
}

.btnStyle1:disabled:hover,
.btnStyle1,
.btnStyle3,
.btnStyle4,
.btnStyle5,
.disabledBtn,
.deleteBtnStyle,
.activeBtn,
.inactiveBtn,
.resendInvite {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 22px;
  font-weight: 500;
  cursor: pointer;
  color: var(--cs-light-03);
  background-color: var(--cs-primary-a);
  border: 1px solid var(--cs-primary-a);
  padding: 10px 12px;
  border-radius: var(--radius-1);
  text-decoration: none;
}

.disabledBtn {
  background-color: var(--cs-light-01);
  color: rgba(46, 54, 76, 0.2);
  border: none;
}

.btnStyle3 {
  background-color: var(--cs-dark-01);
  padding: 8px 24px;
}

.activeBtn {
  border: 1px solid var(--cs-active);
  color: var(--cs-active);
  background-color: transparent;
  padding: 1px 0;
  width: 80px;
  font-size: 0.75rem;
  border-radius: var(--radius-3);
}

.activeBtn:hover,
.inactiveBtn:hover {
  background-color: rgba(73, 69, 79, 0.08);
  border-radius: var(--radius-4);
}

.inactiveBtn {
  border: 1px solid var(--cs-error);
  color: var(--cs-error);
  background-color: transparent;
  padding: 1px 0;
  width: 80px;
  font-size: 0.75rem;
  border-radius: var(--radius-3);
}

.resendInvite {
  border: 1px solid rgba(46, 54, 76, 0.38);
  color: rgba(46, 54, 76, 0.38);
  background-color: transparent;
  padding: 1px 0;
  width: 80px;
  font-size: 0.75rem;
  border-radius: var(--radius-3);
}

.btnStyle4 {
  background-color: transparent;
  border: 1px solid var(--cs-dark-01);
  color: var(--cs-dark-01);
  padding: 8px 23px;
}

.btnStyle5 {
  background-color: transparent;
  border: 1px solid var(--cs-light-01);
  color: var(--cs-dark-01);
}

.btnStyle5:hover {
  border: 1px solid var(--cs-dark-01);
  color: var(--cs-dark-01);
}

.btnStyle3:hover {
  background-color: var(--cs-primary-b);
}

.btnStyle4:hover {
  background-color: var(--cs-dark-01);
  border: 1px solid var(--cs-dark-01);
  color: var(--cs-background);
}

.btnStyle1:hover {
  background-color: var(--cs-primary-b);
  border-color: var(--cs-primary-b);
}

.btnStyle1:disabled:hover,
.btnStyle1:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btnLoadingImg {
  position: relative;
  top: -5px;
  height: 22px;
}

ul {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.25;
}

p {
  margin-bottom: 24px;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
  margin-bottom: 0;
}

h2 {
  font-size: var(--cs-heading-2);
  line-height: 1.5rem;
}

h3 {
  font-size: var(--cs-heading-3);
  line-height: 1.5rem;
}

h4 {
  font-size: var(--cs-heading-4);
}

img,
video {
  border: none;
  max-width: 100%;
}

a {
  color: var(--cs-primary-a);
  text-decoration: underline;
  cursor: pointer;
}

a:hover,
.linkStyle:hover,
a.linkStyle:hover {
  text-decoration: none;
}

a,
input,
img,
select,
textarea {
  outline: 0 none;
}

* {
  -webkit-text-size-adjust: none;
}

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

::placeholder {
  color: var(--cs-dark-02);
}

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

::-webkit-scrollbar-track {
  background: var(--cs-light-02);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--cs-dark-01);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cs-primary-b);
}

hr {
  border: 1px solid var(--cs-light-02);
  border-width: 1px 0 0;
  margin: 30px 0;
  height: 0;
  width: 100%;
}

.opacity-50 {
  opacity: 50%;
}

.noGap {
  margin: 0;
}

strong {
  font-weight: 700;
}

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

.alignCenter {
  text-align: center !important;
}

.alignRight {
  text-align: right !important;
}

.flexTopGap {
  margin-top: auto !important;
}

.flexLeftGap {
  margin-left: auto !important;
}

.flexJCenter {
  justify-content: center !important;
}

.flexJStart {
  justify-content: flex-start !important;
}

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

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

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

.noTopGap {
  margin-top: 0 !important;
}

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

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

.noBottomGap {
  margin-bottom: 0 !important;
}

.posRelative {
  position: relative !important;
}

.posAbsolute {
  position: absolute !important;
}

.posFixed {
  position: fixed !important;
}

.displayNone {
  display: none !important;
}

.displayBlock {
  display: block !important;
}

.displayFlex {
  display: flex !important;
}

.flexVertical {
  flex-direction: column;
  flex-wrap: nowrap !important;
}

.siteLogo {
  font-size: 0;
}

.loginWrapper .siteLogo {
  width: 260px;
  height: 320px;
  background: no-repeat center center / 100% auto;
  background-image: var(--cs-site-logo);
}

.cursorPointer {
  cursor: pointer;
}

.spinner.inactive {
  display: none;
}

@keyframes rotate {
  0% {
    animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.fullLoader > * {
  margin: 3px 10px;
}

.overlay {
  position: fixed;
  left: 0;
  right: 100%;
  top: 0;
  height: 100%;
  background-color: var(--cs-dark-01);
  opacity: 0.6;
  z-index: 99;
}

.overlay.active {
  right: 0;
}

.btnWrap {
  display: flex;
  margin-top: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.btnWrap > *:not(:first-child) {
  margin-left: 10px;
}

.listStyle {
  text-align: left;
}

.listStyle li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
}

.listStyle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-primary-b);
}

.listStyle a {
  text-decoration: none;
}

.listStyle a:hover {
  color: var(--cs-primary-b);
}

.fldWrap {
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.75rem;
}

.fldWrap + .btnStyle1 {
  margin-top: 38px;
}

.customCheck,
.customRadio {
  text-align: left;
  margin-top: 4px;
  margin-bottom: 4px;
  position: relative;
  line-height: 18px;
}

.customCheck:last-child,
.customRadio:last-child {
  margin-bottom: 0;
}

.customCheck input[type="checkbox"],
.customRadio input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.customCheck label,
.customRadio label {
  cursor: pointer;
  padding-left: 24px;
  display: inline-block;
  position: relative;
  font-weight: 400;
  margin-bottom: 0;
}

.customCheck input[type="checkbox"] + label::before,
.customRadio input[type="radio"] + label::before {
  content: "";
  background: var(--cs-light-03);
  border-radius: 2px;
  border: 1px solid var(--cs-light-01);
  position: absolute;
  width: 18px;
  height: 18px;
  top: 0;
  left: 0;
  cursor: pointer;
}

.customCheck.yesNo {
  width: 36px;
  display: flex;
}

.customCheck.yesNo input[type="checkbox"] + label {
  width: 100%;
  height: 18px;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.customCheck.yesNo input[type="checkbox"] + label::before {
  content: "";
  background: var(--cs-light-01);
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.customCheck.yesNo input[type="checkbox"]:checked + label::before {
  background: var(--cs-primary-b);
}

.customCheck.yesNo input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cs-light-03);
  left: 2px;
  top: 2px;
}

.customCheck.yesNo input[type="checkbox"]:checked + label::after {
  left: 20px;
}

.customCheck.noTxt label {
  font-size: 0;
  display: block;
  padding-left: 18px;
}

.customRadio input[type="radio"] + label::before {
  border-radius: 50%;
}

.customCheck input[type="checkbox"]:checked + label::before {
  border: 1px solid var(--cs-primary-b);
  background: var(--cs-primary-b) url(../images/icon-tick.svg) no-repeat center
    center / 10px 8px;
}

.customRadio input[type="radio"]:checked + label::before {
  border: 1px solid var(--cs-primary-b);
  background: var(--cs-light-03);
}

.customRadio input[type="radio"] + label::after {
  content: "";
  background: var(--cs-light-03);
  width: 10px;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 50%;
}

.customRadio input[type="radio"]:checked + label::after {
  background: var(--cs-primary-b);
}

.capsules .customRadio input[type="radio"] + label::before,
.capsules .customRadio input[type="radio"] + label::after {
  display: none;
}

.customControls.capsules > *:not(:last-child) {
  margin-right: 8px;
}

.capsules .customRadio input[type="radio"] + label {
  padding: 8px 16px;
  border: 1px solid var(--cs-dark-01);
  background: var(--cs-light-03);
  color: var(--cs-primary-a);
  border-radius: var(--radius-round);
}

.capsules .customRadio input[type="radio"] + label:hover {
  color: var(--cs-primary-a);
}

.capsules .customRadio input[type="radio"]:checked + label {
  background: var(--cs-dark-01);
  color: var(--cs-light-03);
}

.customCheck input[type="checkbox"]:disabled + label,
.customCheck input[type="checkbox"]:disabled + label::before,
.customRadio input[type="radio"]:disabled + label::before,
.customRadio input[type="radio"]:disabled + label::after,
.customRadio input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

.customCheck input[type="checkbox"]:checked:disabled + label,
.customCheck input[type="checkbox"]:checked:disabled + label::before,
.customRadio input[type="radio"]:checked:disabled + label::before,
.customRadio input[type="radio"]:checked:disabled + label::after,
.customRadio input[type="radio"]:checked:disabled + label {
  opacity: 1;
}

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

.toggleBlk label {
  margin: 0;
}

.toggleBlk .customCheck {
  margin-top: 0;
}

.toggleBlk label + .customControls {
  margin-left: 8px;
}

.rowBlk {
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
}

.rowBlk .colBlk3,
.rowBlk .colBlk4,
.rowBlk .colBlk6,
.rowBlk .colBlk12 {
  padding: 0 15px;
}

.rowBlk .colBlk12 {
  flex: 0 0 100%;
  width: 100%;
}

.rowBlk .colBlk6 {
  flex: 0 0 50%;
  width: 50%;
}

.rowBlk .colBlk4 {
  flex: 0 0 33.33%;
  width: 33.33%;
}

.rowBlk .colBlk3 {
  flex: 0 0 25%;
  width: 25%;
}

.rowBlk .leftGap3 {
  margin-left: 25%;
}

.rowBlk .leftGap4 {
  margin-left: 33.33%;
}

.rowBlk .leftGap6 {
  margin-left: 50%;
}

.customControls {
  display: flex;
  flex-wrap: wrap;
}

.customControls label {
  color: inherit;
}

.customControls label span {
  display: block;
  font-size: 0.625rem;
}

.customControls > *:not(:last-child) {
  margin-right: 20px;
}

.controlVertical {
  flex-direction: column;
}

.controlVertical > *:not(:last-child),
.controlVertical > * {
  margin-right: 0;
}

.mainWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.expander {
  position: fixed;
  z-index: 5;
  left: 350px;
  top: 16px;
  display: flex;
  color: var(--cs-dark-01);
  cursor: pointer;
}

.expander:hover {
  color: var(--cs-primary-b);
}

.expander.expander.collapsedExp {
  color: var(--cs-light-03);
  left: 24px;
}

.mainContent {
  margin: 0 0 0 384px;
  flex: 1;
  max-height: 100vh;
  overflow-y: auto;
}

.expander.collapsedExp ~ .mainContent {
  margin-left: 72px;
}

.leftNav {
  position: fixed;
  height: 100%;
  flex: 0 0 72px;
  width: 72px;
  background: var(--cs-primary-a);
  text-align: center;
  display: flex;
  flex-direction: column;
  z-index: 5;
  left: 0;
  top: 0;
  overflow: auto;
}

.expander.collapsedExp ~ .leftNav {
  left: -72px;
}

.leftNav .siteLogo,
.secondPanel .siteLogo {
  margin: auto auto 18px;
  max-width: 40px;
  height: 40px;
  width: 40px;
}

.leftNav .planner {
  padding: 40px 12px 40px;
  position: relative;
}

.leftNav .planner img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.leftNav .planner::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: var(--cs-secondary-b);
  opacity: 0.2;
}

.leftNav .companyList {
  padding: 16px 0;
}

.leftNav .companyList li {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.leftNav .companyList li::before {
  content: "";
  position: absolute;
  left: -4px;
  height: 100%;
  width: 4px;
  background-color: var(--cs-secondary-a);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}

.leftNav .companyList li.active::before {
  left: 0;
}

.leftNav .companyList li img,
.leftNav .companyList li .noLogo {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0 solid transparent;
}

.leftNav .companyList li .noLogo {
  background-color: var(--cs-secondary-a);
  color: var(--cs-background);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.leftNav .companyList li img:hover,
.leftNav .companyList li.active img,
.addCompany:hover,
.leftNav .companyList li .noLogo:hover,
.leftNav .companyList li.active .noLogo {
  border-radius: var(--radius-1);
}

.leftNav .companyList li.active img,
.leftNav .companyList li.active .noLogo {
  border: 2px solid var(--cs-light-02);
}

.addCompany {
  background: var(--cs-light-05-alpha20);
  border: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
  color: var(--cs-secondary-b);
}

.addCompany .material-icons-outlined {
  font-size: 1.75rem;
}

.secondPanel {
  position: fixed;
  height: 100%;
  display: flex;
  flex-direction: column;
  left: 72px;
  background: var(--cs-background);
  color: var(--cs-dark-01);
  width: 312px;
  box-shadow: var(--cs-shadow);
  z-index: 3;
}

.expander.collapsedExp ~ .secondPanel {
  background: var(--cs-primary-a);
  color: var(--cs-light-03);
  left: 0;
  width: 72px;
}

.secondPanel .siteLogo {
  display: none;
}

.expander.collapsedExp ~ .secondPanel .siteLogo {
  display: block;
}

.companyHeadingPanel {
  display: flex;
  padding: 16px 42px 16px 16px;
}

.companyHeadingPanel,
.contentHeadingPanel {
  align-items: center;
  border-bottom: 1px solid var(--cs-light-01);
  height: 57px;
}

.contentHeadingPanel {
  padding: 16px 24px;
}

.companyHeadingPanel h2 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.companyHeadingPanel .iconList {
  margin-left: auto;
}

.iconList {
  display: flex;
}

.iconList > * {
  margin-left: 6px;
}

.iconList .material-icons-outlined {
  cursor: pointer;
}

.iconList .material-icons-outlined:hover {
  color: var(--cs-primary-b);
}

.expander.collapsedExp ~ .secondPanel .companyHeadingPanel > * {
  display: none;
}

.notiIndicator {
  position: relative;
  display: flex;
}

.notiIndicator::after,
.recentMsg.masseuse .userAvtr:after,
.messageItem .userBlkWrap .userAvtr:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--cs-light-03);
  border-radius: 50%;
  background-color: var(--cs-error);
  right: 2px;
  top: 2px;
}

.itemList {
  padding: 20px;
}

.defaultItemList {
  border-bottom: 1px solid var(--cs-light-01);
}

.projectItemList {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding-bottom: 10px;
  padding-left: 0;
}

.projectItemList > ul {
  overflow: auto;
  max-height: calc(100% - 80px);
  padding-bottom: 12px;
}

.projectItemList > ul > li,
.projectItemList .addFolder,
.projectItemList .sectionHeading {
  padding-left: 20px;
}

.projectItemList .addFolder {
  position: sticky;
  bottom: 0;
}

.itemNameBlk {
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1.5rem;
  position: relative;
}

.itemNameBlk.haveSubItem span.itemName {
  font-weight: 500;
}

.itemNameBlk > span {
  cursor: pointer;
}

.itemNameBlk > span.itemName {
  font-weight: 500;
}

.projectItemList .itemNameBlk > span.itemName {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.itemList li:not(:last-child) {
  margin-bottom: 3px;
}

li.parentli.independent-project .haveSubItem,
li.parentli .haveSubItem {
  padding: 5px 10px;
}
#wrapperul > li .itemNameBlk,
#wrapperul > li li .itemNameBlk {
  position: relative;
}

#wrapperul > li .itemNameBlk:before {
  left: -13px;
}

#wrapperul > li .itemNameBlk:hover::before,
#wrapperul > li li .itemNameBlk:hover::before {
  opacity: 1;
}

.secondPanel .itemNameBlk:hover {
  color: var(--cs-primary-b);
}

.expander.collapsedExp ~ .secondPanel .itemNameBlk:hover {
  color: inherit;
}

.itemNameBlk > span:not(:last-child) {
  margin-right: 8px;
}

.expander.collapsedExp ~ .secondPanel .itemNameBlk > span:not(:last-child) {
  margin: 0 auto;
}

.expander.collapsedExp ~ .secondPanel .itemName,
.expander.collapsedExp ~ .secondPanel .notiNumber,
.expander.collapsedExp ~ .secondPanel .sectionHeading,
.expander.collapsedExp ~ .secondPanel .haveSubItem {
  display: none;
}

.expander.collapsedExp ~ .secondPanel .companyHeadingPanel,
.expander.collapsedExp ~ .secondPanel .defaultItemList {
  border-color: var(--cs-dark-02);
}

.itemList ul ul {
  margin: 3px 0 3px 30px;
}

.expander.collapsedExp ~ .secondPanel .itemList ul ul {
  margin: 0;
}

.itemList li .material-icons-outlined {
  flex: 0 0 24px;
}

.notiNumber {
  display: flex;
  margin-left: auto;
  border-radius: 12px;
  background: var(--cs-secondary-a);
  color: var(--cs-light-03);
  min-width: 24px;
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 2px 5px;
  align-items: center;
  justify-content: center;
}

.notiNumber:hover {
  background: var(--cs-dark-01);
}

.sectionHeading {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.userBlkWrap {
  margin-top: auto;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--cs-light-01);
  display: flex;
}

.assignWrap .userBlkWrap .userAvtr {
  width: 20px;
  height: 20px;
  font-size: 8px;
  flex: 0 0 20px;
  margin-right: 8px;
}

.userBlkWrap .userAvtr,
.membersPanel .userAvtr,
.lastItem,
.actionBtnSec .userAvtr {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cs-dark-01);
  color: var(--cs-light-03);
  display: flex;
  font-size: 0.75rem;
  margin-right: 8px;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transition: all 0.15s ease-in;
  font-weight: 700;
}

.membersPanel .userAvtr:hover {
  transform: translateY(-4px);
}

.actionBtnSec > li button {
  width: 45px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid transparent;
}

.actionBtnSec > li:not(:last-child) button {
  border-right: 1px solid var(--cs-light-02);
  border-left: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
}

.actionBtnSec > li:last-child button {
  border: 1px solid transparent;
}

.actionBtnSec > li button .userAvtr {
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
  font-size: 8px;
  margin-right: 0;
}

.userBlkWrap .userSettings {
  margin-left: auto;
  display: flex;
  cursor: pointer;
}

.userBlkWrap .userSettings:hover {
  color: var(--cs-primary-b);
}

.userBlkWrap .userName {
  padding-right: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expander.collapsedExp ~ .secondPanel .userBlkWrap {
  display: none;
}

.loginWrapper {
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
}

.demoPanel {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 20px;
  display: flex;
}

.demoPanel > * {
  margin-left: 10px;
  width: 120px;
}

.demoPanel select {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 0.875rem;
}

.loginWrapper h1 a,
.loginWrapper h1 img {
  display: block;
}

.loginBlk {
  width: 420px;
  margin-left: 120px;
}

.userMenu {
  display: flex;
  width: 100%;
  background: var(--cs-hoverShade-1);
  border-radius: var(--radius-1);
  padding: 3px;
  margin-bottom: 40px;
}

.userMenu li {
  flex: 1;
  padding: 6px;
  border-radius: inherit;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  color: var(--cs-primary-b);
}

.userMenu li.active {
  background: var(--cs-primary-a);
  color: var(--cs-light-03);
}

.loginBlk .fldWrap,
.editableFields .fldWrap {
  position: relative;
}

.loginBlk .fldWrap label,
.editableFields .fldWrap label {
  position: absolute;
  top: 0;
  left: 16px;
  padding: 0 4px;
  background: var(--cs-background);
  border: 1px solid var(--cs-background);
  transform: translateY(-50%);
  margin: 0;
  border-radius: 4px;
}

.loginBlk .fldWrap input:focus ~ *,
.editableFields .fldWrap input:focus ~ * {
  color: var(--cs-primary-b);
}

.loginBlk .fldWrap input.fldError ~ *,
.universalErr {
  color: var(--cs-error);
}

.loginBlk .fldWrap input.fldError ~ *.forgotPassword {
  color: inherit;
}

.loginBlk .fldWrap .userEmail {
  padding: 15px 10px 15px 50px;
}

.loginBlk .fldWrap .material-icons-outlined {
  position: absolute;
  left: 14px;
  top: 17px;
}

.loginBlk .fldWrap input:disabled ~ .material-icons-outlined {
  opacity: 0.5;
  cursor: not-allowed;
}

.loginBlk .fldWrap .userPassword {
  padding: 15px 50px;
}

.loginBlk .fldWrap .material-icons-outlined.rightIcon {
  left: auto;
  right: 14px;
  cursor: pointer;
}

.forgotPassword {
  position: relative;
  text-align: right;
  font-size: 0.75rem;
  margin-top: 8px;
}

.signUpBlk .fldWrap + .btnStyle1 {
  margin-top: 38px;
}

.loginBlk .btnStyle1 {
  width: 100%;
  position: relative;
  height: 44px;
}

.loginBlk .btnStyle1.btnInline {
  width: auto;
  min-width: 100px;
  text-align: center;
}

.pwStrength {
  font-size: 0.75rem;
  padding: 5px 0 0;
  display: flex;
  align-items: center;
}

.pwStrength > em {
  margin: 0 5px 0 0;
  padding: 1px 10px;
  background: transparent;
  border: 1px solid var(--cs-light-01);
  border-radius: 4px;
  font-style: normal;
}

.pwStrength > em.active {
  background: var(--cs-dark-01);
  color: var(--cs-light-03);
  border-color: var(--cs-dark-01);
}

.orSeparator {
  overflow: hidden;
  margin: 30px 0;
  text-align: center;
}

.orSeparator span {
  display: inline-block;
  padding: 0 16px;
  position: relative;
}

.orSeparator span::before,
.orSeparator span::after {
  position: absolute;
  content: "";
  width: 99em;
  top: 50%;
  height: 1px;
  background: var(--cs-light-01);
}

.orSeparator span::before {
  right: 100%;
}

.orSeparator span::after {
  left: 100%;
}

.socialLogin {
  display: flex;
  width: 100%;
  gap: 16px;
}

.socialLogin li {
  cursor: pointer;
  flex: 1;
  text-align: center;
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-1);
  height: 56px;
  font-size: 0;
  background: var(--cs-background) no-repeat center center / 20px;
}

.socialLogin li:hover {
  border-color: var(--cs-primary-b);
  background-color: var(--cs-light-05);
}

.socialLogin li.googleLogin {
  background-image: url(../images/icon-google.svg);
}

.socialLogin li.microsoftLogin {
  background-image: url(../images/icon-microsoft.svg);
}

.socialLogin li.appleLogin {
  background-image: url(../images/icon-apple.svg);
}

.withHelpIcon {
  display: flex;
  align-items: center;
}

.helpIcon {
  background: var(--cs-dark-02);
  color: var(--cs-light-03);
  border-radius: 50%;
  display: flex;
  font-size: 0.675rem;
  line-height: 15px;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dragDrop {
  position: relative;
}

.fileReqDesc {
  border-radius: var(--radius-1);
  border: 1px dashed var(--cs-light-01);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 46px;
  font-size: 0.75rem;
  position: relative;
  height: 120px;
}

.dragDrop input[type="file"] {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

.dragDrop input[type="file"]:focus + .fileReqDesc,
.fileReqDesc.active {
  border-color: var(--cs-primary-b);
}

.fileReqDesc .material-icons-outlined {
  flex: 0 0 80px;
  padding: 0 10px;
  font-size: 2.5rem;
  text-align: center;
}

.uploadImg {
  border-radius: var(--radius-1);
  width: 98px;
  height: 98px;
  overflow: hidden;
  border: 1px dashed var(--cs-light-01);
  position: relative;
}

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

.fileReqTxt {
  flex: 1;
}

.cancelBtn {
  cursor: pointer;
}

.cancelBtn:hover {
  color: var(--cs-primary-b);
}

/* 20.04.23 */
.subItemPlus {
  color: var(--cs-secondary-a);
  font-size: 16px;
}

.addFolder .itemName {
  color: var(--cs-primary-a);
  font-weight: 500;
}

.itemNameBlk.addFolder {
  margin-top: 16px;
}

.btnStyle2 {
  height: 32px;
  width: 32px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-3);
  background-color: var(--cs-background);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mainContent .contentHeadingPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background-color: var(--cs-background);
  z-index: 2;
}

.mainContent .contentHeadingPanel h2 {
  margin-bottom: 0;
}

.contentHeadingRightPart {
  display: flex;
  align-items: center;
}

.contentHeadingRightPart .btnStyle1 {
  background-color: var(--cs-primary-a);
  padding: 5px 16px;
  line-height: 1.6;
  border-radius: var(--radius-3);
}

.contentHeadingRightPart .btnStyle1:hover {
  background-color: var(--cs-primary-b);
}

span.settingsIcon {
  font-size: 18px;
}

.logout {
  display: none;
  position: absolute;
  right: -270px;
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-3);
  background: var(--cs-background);
  bottom: 42px;
  width: 312px;
  border: 1px solid transparent;
}

.logout-content {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--cs-dark-01);
  height: auto;
  padding: 10px 16px;
}

.logout-content span {
  color: var(--cs-neutral);
}

.logout-content:last-child {
  align-items: flex-start;
  border-top: 1px solid var(--cs-light-01);
}

.logout-content:hover {
  background-color: var(--cs-hoverShade-1);
}

.logout-content > span {
  margin-right: 5px;
}

.logout-content p {
  color: var(--cs-neutral);
  font-size: 11px;
}

.contentHeadingRightPart .btnStyle1 .btnAdd {
  margin-right: 8px;
  font-size: 16px;
}

.contentHeadingRightPart button:not(:last-child) {
  margin-right: 8px;
}

.btnStyle2:hover {
  border: 1px solid var(--cs-primary-b);
}

.btnStyle2:hover .settingsIcon {
  color: var(--cs-primary-b);
}

.mainContentRightSec {
  padding: var(--just-beneath-nav) 0;
}

.inner-container {
  padding: 40px 24px;
}

.RecentTemplateWrapper h3 {
  margin-bottom: 10px;
}

.createOwn .addFolder {
  height: 114px;
  width: 100%;
  background: var(--cs-hoverShade-1);
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-4);
  display: flex;
  justify-content: center;
  margin-top: 0;
  cursor: pointer;
}

.templateCardList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 -8px;
}

.templateCardList li {
  width: 50%;
  padding: 0 8px;
}

.recentTemplates .card-detail h4 {
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: inherit;
}

.card-detail {
  padding-right: 14px;
}

.templateCard {
  padding: 24px;
  background: var(--cs-background);
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-4);
  justify-content: space-between;
  display: flex;
}

.templateCard .thumbnail {
  flex: 0 0 54px;
}

.templateCard .thumbnail img {
  border-radius: var(--radius-4);
  width: 100%;
  height: auto;
}

.templateCard-left {
  display: flex;
}

.templateCard .card-detail {
  padding-left: 16px;
}

.RecentTemplateWrapper .row,
.projectTemplateWrapper .row {
  margin-left: -12px;
  margin-right: -12px;
}

.createOwn .addFolder .material-icons-outlined {
  min-width: 24px;
  font-size: 15px;
  line-height: 1.6;
}

.navigateNext {
  cursor: pointer;
}

.projectTemplateHeading {
  padding: var(--section-gap) 0 0 0;
  display: flex;
  align-items: center;
}

.projectTemplate h3 {
  margin-bottom: 20px;
}

.projectTemplate li {
  padding: 13px 16px;
}

.projectTemplate li a {
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.projectTemplate li a:hover {
  color: var(--cs-primary-b);
}

.tRight {
  text-align: right;
}

.searchFieldWrap {
  max-width: 290px;
  position: relative;
  margin-left: auto;
  margin-bottom: 16px;
}

.searchFieldWrap .material-icons-outlined {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.searchFld input {
  padding-left: 32px;
  padding-right: 32px;
  background: var(--cs-search) no-repeat 7px center;
}

.searchFld input::placeholder {
  color: var(--cs-placeholder);
  letter-spacing: 0.5px;
}

.biggerCard .card-detail h4,
.card-detail p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: inherit;
}

.biggerCard .card-detail p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: inherit;
}

.projectTemplateHeading h3 {
  margin-bottom: 0;
}

.projectTemplateCardWrapper li {
  margin-bottom: 16px;
}

.mainContentRightSec h4 {
  margin-bottom: 8px;
}

@keyframes slide-left {
  from {
    margin-right: -100%;
  }

  to {
    margin-right: 0%;
  }
}

@keyframes slide-right {
  from {
    margin-right: 0;
  }

  to {
    margin-right: -100%;
  }
}

.createNewProjectForm .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cs-light-01);
  padding: 16px 24px;
}

.createNewProjectForm .header h2 {
  margin-bottom: 0;
}

.createNewProjectForm {
  position: fixed;
  width: 690px;
  right: -690px;
  transition: all 0.6s;
  height: 100%;
  top: 0;
  background: var(--cs-background);
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  z-index: 7;
}

.createNewProjectForm.formUpgradeDrawer {
  width: 500px;
  right: -500px;
  overflow: auto;
}

.createNewProjectForm.addToggle {
  right: 0;
}

.createNewProjectForm .close {
  cursor: pointer;
  color: var(--cs-dark-01);
}

.createNewProjectForm .close:hover {
  color: var(--cs-secondary-a);
}

.createNewProjectForm .formContent {
  padding: 24px;
}

.mergedFld,
.inviteMember .htmlClass.mergedFld {
  position: relative;
  border-radius: var(--radius-1);
  border: 1px solid var(--cs-light-01);
}

.inviteMember .htmlClass.mergedFld:hover,
.inviteMember .htmlClass.mergedFld:focus-visible,
.inviteMember .htmlClass.mergedFld:focus-within {
  border: 1px solid var(--cs-primary-b);
  color: var(--cs-primary-a);
}

.mergedFld input {
  border: none;
}

.mergedFld select {
  position: absolute;
  right: 0;
  top: 0;
  width: 20%;
  padding-right: 30px;
  border: none;
  text-align: right;
}

.noStyle {
  font-size: 0.875rem;
  line-height: 22px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--radius-1);
  color: var(--cs-dark-01);
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.btnPart,
.btnPart .cancelCreate {
  display: flex;
}

.btnPart {
  align-items: center;
  justify-content: end;
  margin-top: 24px;
}

.btnPart button:not(:last-child) {
  margin-right: 14px;
}

.noStyle:hover {
  color: var(--cs-primary-b);
}

.formContent > div:not(:first-child).inputHolder {
  margin-top: 24px;
}

.formContent > div > div:not(:last-child).mergedFld {
  margin-bottom: 8px;
}

.createNewProjectForm label {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--cs-dark-01);
}

.createNewProjectForm .itemNameBlk > span.itemName {
  font-weight: 600;
}

.createNewProjectForm .btnStyle1 {
  background-color: var(--cs-dark-01);
  border: 1px solid var(--cs-dark-01);
}

.createNewProjectForm .btnStyle1:hover {
  background-color: var(--cs-primary-b);
  border: 1px solid var(--cs-primary-b);
}

.CNPScreen .star {
  color: var(--cs-CNPscreen-star);
  position: relative;
  top: -2px;
}

.CNPScreen .itemName {
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

.CNPScreen .contentHeadingRightPart select {
  width: auto;
  line-height: 1.36;
  padding: 7px 25px 7px 8px;
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
  background: var(--cs-dark-01) url(../images/arrow-white.svg) no-repeat
    calc(100% - 2px) center / 25px;
  color: var(--cs-background);
}

.CNPScreen .contentHeadingRightPart select:hover {
  background-color: var(--cs-primary-b);
  cursor: pointer;
}

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

.CNPScreen .contentHeadingRightPart {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
}

.CNPScreen .contentHeadingRightPart .btnStyle1 {
  border-radius: var(--radius-3);
  margin-right: 1px;
  width: max-content;
}

.CNPScreen .contentHeadingRightPart select option {
  color: var(--cs-background);
}

.CNPScreen .contentHeadingRightPart .btnStyle2 {
  width: 44px;
  height: 34px;
  margin-left: 8px;
}

.CNPScreen button.hdrSettingsDropdownToggle {
  margin-right: 0;
}

.createCard {
  background: var(--cs-background);
  border: 1px solid var(--cs-light-02);
  border-radius: var(--radius-4);
  padding: 33px 24px;
  cursor: pointer;
  min-height: 290px;
}

.CNPScreenDummy {
  padding: 16px 24px;
}

.CNPScreenDummy .col-lg-4 {
  width: 100%;
  height: 100%;
}

.CNPScreenDummy .col-lg-4 a {
  text-decoration: none;
}

.CNPScreenDummy .row {
  margin: var(--row-pad);
}

.createCard h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.createCard p {
  font-size: 1rem;
}

.CNPScreenDummy p:first-child {
  font-weight: 500;
  margin-bottom: 18px;
}

.itemNameBlk:focus-visible,
.itemNameBlk.haveSubItem span.itemName:focus-visible,
.parentli .haveSubItem + ul .itemName:focus-visible,
.itemNameBlk > span.itemName:focus-visible,
.itemListWrap .left span:nth-child(2) {
  outline: 0;
}

.membersPanel .userAvtr {
  /* border: 2px solid var(--cs-background); */
  box-shadow: 0 0 0 2px var(--cs-background, #ffffff);
  margin-right: -8px;
  cursor: pointer;
}

.membersList .userAvtr,
.statusCard .gridAssgineeList .userBlkWrap .userAvtr {
  margin-right: 8px;
}

.statusCard .gridAssgineeList li .userBlkWrap {
  justify-content: start;
}
.statusCard .userName,
.statusCard .date {
  color: var(--cs-resend);
}

.statusCard .noTaskDueDate.date {
  color: var(--cs-resend) !important;
}

.membersList .userName span,
.gridAssgineeList .userName span {
  display: block;
  font-weight: 400;
  font-size: 0.675rem;
  color: var(--cs-neutral);
}

.membersList .userName,
.gridAssgineeList .userName {
  font-size: 0.875rem;
  font-weight: 500;
}

.membersList .contactPart {
  display: flex;
  align-items: center;
}

.membersList .contactPart span {
  cursor: pointer;
}

.addMemberlastItem {
  border-top: 1px solid var(--cs-light-01);
  position: sticky;
  bottom: 0;
}

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

.membersList .userPart,
.gridAssgineeList .userPart {
  display: flex;
  align-items: center;
}

.membersList .userPart .userAvtr:hover {
  transform: none;
}

.addMemberlastItem .addplus {
  width: 24px;
  height: 24px;
}

.addMemberlastItem .itemName {
  font-size: 0.875rem;
}

.membersPanel {
  display: flex;
  stroke-linecap: calc();
  padding-right: 16px;
  position: relative;
}

.membersPanel .lastItem {
  background-color: var(--cs-background);
  border: 1px solid var(--cs-placeholder);
  color: var(--cs-dark-01);
  cursor: pointer;
}

/*LoadingBtn Center*/
.loginBtnCenter {
  margin: auto;
  display: block;
}

.itemList li .plus-class.material-icons-outlined,
.itemList li .delete-class.material-icons-outlined {
  color: var(--cs-secondary-a);
  font-size: 16px;
  flex: 0 0 20px;
  opacity: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-50);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cs-background);
}

.parentli .haveSubItem:hover .plus-class.material-icons-outlined,
.parentli .haveSubItem:hover .delete-class.material-icons-outlined {
  opacity: 1;
}

.itemList li .plus-class.material-icons-outlined:hover {
  background-color: var(--cs-hoverShade-1);
}

.itemList li .delete-class.material-icons-outlined:hover {
  background-color: var(--cs-error-bg);
}

.itemList li .delete-class.material-icons-outlined {
  color: var(--cs-error);
}

.membersPanel .userAvtr img {
  height: 30px;
  width: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.memberPanelDropdownArea .membersList {
  position: absolute;
  right: 22px;
  top: 40px;
  width: 430px;
  height: auto;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
}

.noAssignee .gridAssgineeList {
  position: absolute;
  right: 0;
  top: 40px;
  min-height: 50px;
  max-height: 310px;
  height: auto;
  overflow-y: scroll;
  padding: 0;
}

.membersPanel .membersList li {
  padding-left: 16px;
  padding-right: 16px;
  cursor: pointer;
}

.membersPanel .membersList li .userAvtr {
  box-shadow: none;
}

.membersList .phone {
  margin-right: 10px;
}

.secondTopic {
  z-index: 1;
}

.createNewSecMainContent {
  padding: 24px 0;
}

.createNewSecMainContent > div:not(.tasktable):not(.taskNameHeadingPane) {
  padding-left: 24px;
  padding-right: 24px;
}

.create-new-page.createNewSecMainContent {
  padding: 24px;
}

.taskNameHeadingPane {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.actionBtnSec {
  display: flex;
  align-items: center;
  border: 1px solid var(--cs-light-02);
  border-radius: var(--radius-5);
}

.actionBtnSec > li {
  position: relative;
}

.actionBtnSec > li:hover button.actionBtnSecli {
  border: 1px solid var(--cs-secondary-b);
  background-color: var(--cs-hoverShade-1);
}

.actionBtnSec > li:hover {
  border-right: none;
}

ul.dropdown-menu,
ul.hdrDropdownMenu,
ul.hdrSettingsDropdownMenu,
ul.taskHeadingMore,
ul.subArrowMenu,
ul.filterSelectBoxWrap,
.clearPriorityMenu,
.subArrowMenu2 {
  display: none;
  position: absolute;
  width: 214px;
  right: 0;
  border: 1px solid transparent;
  filter: drop-shadow(0px 4px 8px rgba(58, 58, 68, 0.16))
    drop-shadow(0px 8px 16px rgba(90, 91, 106, 0.16));
  border-radius: var(--radius-5);
  top: 35px;
  background-color: var(--cs-background);
  z-index: 3;
}

ul.filterSelectBoxWrap {
  padding: 14px 0;
  width: 450px;
  border-radius: var(--radius-3);
}

ul.taskHeadingMore {
  left: 170px;
  border: none;
  border-radius: var(--radius-3);
  width: 264px;
}

ul.subArrowMenu {
  left: 268px;
  top: 172px;
  border: none;
  border-radius: var(--radius-3);
}

.subArrowMenu2 {
  left: 268px;
  top: 128px;
  border: none;
  border-radius: var(--radius-3);
}

ul.taskHeadingMore .subArrow {
  margin-left: auto;
}

ul.taskHeadingMore li a span:first-child {
  margin-right: 8px;
}

ul.taskHeadingMore li.delete a {
  color: var(--cs-blocker);
}

ul.hdrSettingsDropdownMenu {
  right: 31px;
  top: 52px;
}

ul.hdrDropdownMenu {
  z-index: 3;
}

ul.dropdown-menu a,
.dropdown-submenu a,
.hdrDropdownMenu a,
ul.hdrSettingsDropdownMenu a,
ul.taskHeadingMore li a,
.clearPriorityMenu li a,
ul.dropdown-menu div,
.dropdown-submenu div,
.hdrDropdownMenu div,
ul.hdrSettingsDropdownMenu div,
ul.taskHeadingMore li div,
.clearPriorityMenu li div {
  display: flex;
  align-items: center;
  justify-content: start;
  text-decoration: none;
  line-height: 1;
  font-weight: 500;
}

ul.dropdown-menu a span,
.dropdown-submenu a span,
.hdrDropdownMenu a span,
ul.hdrSettingsDropdownMenu a span,
.clearPriorityMenu a span,
ul.dropdown-menu div span,
.dropdown-submenu div span,
.hdrDropdownMenu div span,
ul.hdrSettingsDropdownMenu div span,
.clearPriorityMenu div span {
  margin-right: 8px;
}

.tasktable td:not(:first-child):not(:nth-child(2)) .clearPriorityMenu a span {
  position: relative;
  left: 0;
  transform: none;
}

.dropdown-menu.show,
.hdrDropdownMenu.show,
.hdrSettingsDropdownMenu.show,
.createFolderField.show,
.taskHeadingMore.show,
.subArrowMenu.show,
.filterSelectBoxWrap.show,
.clearPriorityMenu.show,
.subArrowMenu2.show {
  display: block;
}

ul.dropdown-menu li,
.hdrDropdownMenu li,
ul.hdrSettingsDropdownMenu li,
ul.taskHeadingMore li,
.filterSelectBoxWrap li,
.clearPriorityMenu li {
  padding: 10px 16px;
  cursor: pointer;
  height: 43px;
}

.subArrowMenu2 li {
  display: flex;
  align-items: center;
}

ul.dropdown-menu li:hover,
.hdrDropdownMenu li:hover,
ul.hdrSettingsDropdownMenu li:hover,
ul.taskHeadingMore li:hover,
.clearPriorityMenu li:hover,
.membersPanel .membersList li:not(:last-child):hover {
  background-color: var(--cs-hoverShade-1);
}

ul.dropdown-submenu li:first-child {
  background-color: transparent;
}

.dropdown-toggle2:hover .dropdown-submenu {
  display: block;
}

.toggle-tasktable {
  display: none;
}

ul.dropdown-menu li:first-child,
.logout-content:first-child,
ul.hdrSettingsDropdownMenu li:first-child,
ul.taskHeadingMore li:first-child,
.filterSelectBoxWrap li:first-child {
  border-radius: var(--radius-3) var(--radius-3) 0 0;
}

ul.dropdown-menu li:last-child,
ul.hdrSettingsDropdownMenu li:last-child,
.logout-content:last-child,
ul.taskHeadingMore li:last-child,
.filterSelectBoxWrap li:last-child,
.clearPriorityMenu li:last-child {
  border-radius: 0 0 var(--radius-3) var(--radius-3);
}

.logout-content:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.clearPriorityMenu {
  top: 40px;
  right: -5px;
}

.clearPriorityMenu li:last-child a {
  color: var(--cs-blocker);
}

.dropdown-submenu {
  display: none;
  position: absolute;
  width: 214px;
  border: 1px solid var(--cs-secondary-b);
  right: calc(100% + 4px);
  top: 0;
  padding: 15px 0;
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-3);
  background-color: var(--cs-background);
}

.dropdown-toggle2 .checkboxHolder {
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 15px;
}

.dropdown-toggle2 .checkboxHolder input {
  width: auto;
  cursor: pointer;
  accent-color: var(--cs-dark-01);
}

.dropdown-toggle2 .checkboxHolder label {
  line-height: 1;
  font-size: 0.875rem;
  margin-bottom: 0;
  padding-left: 12px;
  cursor: pointer;
}

.dropdown-submenu h6 {
  font-size: 0.563rem;
  margin-bottom: 7px;
  padding-left: 15px;
}

.dropdown-toggle2 li:hover .checkboxHolder {
  background: var(--cs-hover-check) no-repeat 6px center/ 30px;
}

ul.dropdown-menu .dropdown-submenu li {
  padding: 7px 0;
}

.tasktable table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: none;
}

.tasktable table th {
  text-align: left;
  padding: 6px 16px;
}

.tasktable table th:first-child,
.tasktable table th:nth-child(3) {
  width: 110px;
}

.tasktable table th:nth-child(2) {
  width: auto;
}

.tasktable table th:nth-child(4) {
  width: 220px;
}

.arrow-dropdown,
.sort-arrow-down {
  background-image: var(--cs-arrow-dropdown);
  background-size: 9px;
}

.double-sort-arrow {
  background-image: var(--cs-doubleSortArrow);
  background-size: 19px;
}

.sort-arrow-up {
  background-image: var(--cs-arrow-up);
  background-size: 9px;
}

.tasktable td {
  height: 48px;
}

.arrow-down-nav {
  background: var(--cs-arrow-down) no-repeat calc(100% + 5px) center / 25px;
}

.contentHeadingRightPart .hdrDropdownToggle {
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.contentHeadingRightPart .hdrDropdownToggle span {
  margin-left: 13px;
  position: relative;
}

.contentHeadingRightPart .hdrDropdownToggle span::before {
  position: absolute;
  top: -6px;
  left: 0;
  height: calc(100% + 11.5px);
  background-color: var(--cs-background);
  content: "";
  width: 1px;
}

.contentHeadingRightPart ul.hdrDropdownMenu {
  right: 85px;
  top: 52px;
}

.tasktable th {
  position: relative;
  font-weight: 400;
  font-size: 12px;
}

.tasktable th .arrow-dropdown {
  cursor: pointer;
}

.tasktable tr > * + * {
  padding-left: 16px;
}

.tasktable form {
  position: relative;
}

.tasktable .simpleTaskListTaskName {
  margin-left: 25px;
  padding-left: 0;
  display: inline-block;
}
.taskCardViewItemWrapper .simpleTaskListTaskName {
  margin-left: 0;
  padding-left: 0;
}
.taskCardViewItem .taskNameWrap .taskName .taskRelatedData {
  margin-top: 5px;
}
.taskCardViewItem .taskNameWrap .statusIcon {
  flex: 0 0 50px;
  cursor: pointer;
}

.tasktable input {
  display: block;
  width: 100%;
  margin: 0 auto;
  border: none;
  padding: 13px 45px 0px 25px;
  transition: all 0.32s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  background-color: transparent;
}

.tasktable table tbody tr:hover {
  background-color: var(--cs-hoverShade-1);
}

.tasktable td button {
  border-radius: 0 0 5px 5px;
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  color: var(--cs-background);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  position: absolute;
  top: 0;
  z-index: -1;
  opacity: 0;
}

.todo-row td:first-child {
  background: var(--cs-todo) no-repeat 14px 15px / 20px;
}

.done-row td:first-child {
  background: var(--cs-done) no-repeat 14px 15px / 20px;
}

.overdue-row td:first-child {
  background: var(--cs-overdue) no-repeat 14px 15px / 20px;
}

.blocked-row td:first-child {
  background: var(--cs-blocked) no-repeat 14px 15px / 20px;
}

.todo {
  background: var(--cs-todo) no-repeat left center / 20px;
}

.done {
  background: var(--cs-statusDone) no-repeat left center / 18px;
}

.overdue {
  background: var(--cs-overdue) no-repeat left center / 20px;
}

.blocked {
  background: var(--cs-blocked) no-repeat left center / 20px;
}

/* .assign{
  background:  var(--cs-assign) no-repeat 100% center / 20px;
} */
.calendar {
  background-image: var(--cs-calendar);
}
.plannerCalendar {
  background-image: var(--cs-calender-planner);
  background-size: 20px;
}

.priority {
  background: var(--cs-priority) no-repeat 100% center / 20px;
}

.unassign {
  background: var(--cs-dark-04) var(--cs-user-solid) no-repeat center / 9px;
}

.high-priority {
  background: var(--cs-high-priority) no-repeat 100% center / 20px;
}

.medium-priority {
  background: var(--cs-medium-priority) no-repeat 100% center / 20px;
}

.low-priority {
  background: var(--cs-low-priority) no-repeat 100% center / 20px;
}

.message {
  background: var(--cs-message) no-repeat 100% center / 13px;
}

.grid-list {
  background: var(--cs-grid-list) no-repeat 100% center / 20px;
}

.memo-pad {
  background: var(--cs-memo-pad) no-repeat 100% center / 20px;
}

.drag {
  background-image: var(--cs-drag);
}

.backIcon {
  background-image: var(--back-icon);
}

.teamTypeStepImg {
  background: var(--teamTypeStep) no-repeat center / 100%;
  background-size: cover;
}

.teamInfoStepImg {
  background: var(--teamInfoStep) no-repeat center / 100%;
  background-size: cover;
}

.profileInfoStepImg {
  background: var(--profileInfoStep) no-repeat center / 100%;
  background-size: cover;
}

.onboardingRightImgWrap {
  height: 100vh;
}

.tasktable td,
.tasktable td li {
  position: relative;
}

.tasktable
  td:nth-child(2)
  span:not(.simpleTaskListTaskName):not(.mentionedPerson):not(.msgDueDate):not(
    .msgTextMore
  ):not(.leftActions span):not(.rightAction span) {
  position: absolute;
  right: 10px;
  width: 25px;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.tasktable td:nth-child(2) span.priorityIcon {
  left: 10px;
  z-index: 1;
  width: auto;
  height: auto;
  cursor: pointer;
}

.tasktable input[type="date"]::-webkit-inner-spin-button,
.tasktable input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  -webkit-appearance: none;
  width: 100%;
  position: absolute;
}

.tasktable td:nth-child(3) {
  color: var(--cs-secondary-b);
  cursor: pointer;
}

.assignWrap {
  position: relative;
}

.assigneeList,
.membersList {
  display: none;
  position: absolute;
  right: 0;
  width: 360px;
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-3);
  padding: 16px;
  height: auto;
  max-height: 310px;
  min-height: 50px;
  overflow-y: scroll;
  top: 55px;
  border: none;
  background-color: var(--cs-background);
  z-index: 3;
}

.gridAssgineeList {
  display: none;
  position: absolute;
  left: 0;
  width: 360px;
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-3);
  padding: 8px 0 0 0;
  background-color: var(--cs-background);
}

.assigneeList.show,
.priorityList.show,
.membersList.show,
.gridAssgineeList.show,
.statusList.show {
  display: block;
}

.assigneeList .userBlkWrap,
.membersList .userBlkWrap,
.statusCard .gridAssgineeList .userBlkWrap {
  border-top: none;
  color: var(--cs-dark-01);
  padding: 8px 0;
  margin-bottom: 0;
}

.assigneeList .userBlkWrap .userName {
  font-weight: 500;
}

.tasktable td .assigneeList li,
.tasktable .unassignItem span.categoryName {
  position: relative;
  color: var(--cs-dark-01);
  font-weight: 500;
}

.tasktable td:not(:first-child):not(:nth-child(2)) span.unassign,
.assigneeListWithoutTable span.unassign {
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-50);
  /* margin-right: 4px; */
}
.assigneeListWithoutTable .assigneeList span.unassign {
  height: 30px;
  width: 30px;
}

/* .tasktable td .assigneeList li:first-child {
  padding-left: 20px;
  margin-bottom: 16px;
} */

.priorityList,
.statusList {
  width: 125px;
  height: auto;
  padding: 0;
  overflow: visible;
  display: none;
  position: absolute;
  right: 0;
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-3);
  top: 40px;
  border: 1px solid var(--cs-secondary-b);
  z-index: 3;
  background-color: var(--cs-background);
}

.tasktable table tbody {
  overflow: auto;
  height: auto;
  border-radius: var(--radius-3) var(--radius-3) 0 0;
}

/* Firefox */
.assigneeList,
.progressCards {
  scrollbar-width: auto;
  scrollbar-color: var(--cs-placeholder);
}

/* Chrome, Edge, and Safari */
.assigneeList::-webkit-scrollbar,
.gridWrapper::-webkit-scrollbar,
.taskOuterWrap::-webkit-scrollbar,
.gridAssgineeList ul::-webkit-scrollbar,
.projectItemList ul::-webkit-scrollbar {
  width: 6px;
}

.memberRolesection::-webkit-scrollbar {
  width: 8px;
}

.assigneeList::-webkit-scrollbar-track,
.gridWrapper::-webkit-scrollbar-track,
.projectView::-webkit-scrollbar-track,
.taskOuterWrap::-webkit-scrollbar-track,
.memberRolesection::-webkit-scrollbar-track,
.gridAssgineeList ul::-webkit-scrollbar-track,
.projectItemList ul::-webkit-scrollbar-track {
  background: var(--cs-background);
}

.assigneeList::-webkit-scrollbar-thumb,
.gridWrapper::-webkit-scrollbar-thumb,
.projectView::-webkit-scrollbar-thumb,
.taskOuterWrap::-webkit-scrollbar-thumb,
.memberRolesection::-webkit-scrollbar-thumb,
.gridAssgineeList ul::-webkit-scrollbar-thumb,
.projectItemList ul::-webkit-scrollbar-thumb {
  background-color: var(--cs-placeholder);
  border-radius: 10px;
  border: 2px solid var(--cs-background);
}

.assigneeList .userBlkWrap .userAvtr img {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-50);
  object-fit: cover;
}

.tasktable
  td:not(:first-child):not(:nth-child(2))
  .priorityList
  li
  span:first-child {
  left: 16px;
}

.tasktable
  td:not(:first-child):not(:nth-child(2))
  .priorityList
  li
  span:nth-child(2) {
  height: auto;
  position: relative;
  padding-left: 25px;
  top: 0;
  transform: none;
  left: 0;
}

.tasktable td:not(:first-child):not(:nth-child(2)) .priorityList li,
.statusList li {
  padding: 8px 16px;
  cursor: pointer;
}

.tasktable td:not(:first-child):not(:nth-child(2)) .priorityList li:hover,
.statusList li:hover {
  background-color: var(--cs-hoverShade-1);
}

.tasktable td:nth-child(2) span.message {
  position: absolute;
  right: 37px;
  top: 50%;
  transform: translateY(-50%);
}

span.message {
  position: relative;
}

span.message:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--cs-light-03);
  border-radius: var(--radius-50);
  background-color: var(--cs-error);
  right: -2px;
  top: 5px;
}

.errorContent {
  padding: 24px;
}

.errorIcon {
  display: block;
  text-align: center;
  color: var(--cs-error);
}

.errorText {
  text-align: center;
  margin: 10px auto auto;
  height: auto;
}

.errorContent .error {
  border-radius: var(--radius-3);
  padding: 20px;
}

.addTask {
  padding: 0 16px;
  cursor: pointer;
  background-color: transparent;
  margin-top: 12px;
}

.addTask .itemNameBlk {
  margin-top: 0;
}

.projectView.tasktable .userBlkWrap {
  border-top: none;
}

tbody tr.not-empty td:not(:nth-child(4)):not(:nth-child(1)) {
  background: none;
}

.tasktable tr.not-empty td:nth-child(3) {
  padding-left: 15px;
  color: var(--cs-dark-01);
}

.tasktable tr.not-empty td:nth-child(3) > div {
  display: inline-block;
}

tr.not-empty .priorityWrap span:nth-child(2) {
  width: auto;
  left: 44px;
}

.tasktable tr.not-empty .userBlkWrap {
  width: 220px;
  overflow: hidden;
  padding: 8px 16px 8px 0;
  border-top: none;
  cursor: pointer;
}

.tasktable tr.not-empty .userBlkWrap .userName {
  font-weight: 400;
  padding-left: 2px;
}

.tasktable tbody tr.blocked-row td:nth-child(1) {
  color: var(--cs-blocker);
}

.tasktable tbody tr.overdue-row td:nth-child(1) {
  color: var(--cs-blocker);
}

.tasktable tbody tr.done-row td:nth-child(1) {
  color: var(--cs-color-done);
}

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

.taskAndStages {
  margin-top: 16px;
}

.progressCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.progress {
  background-color: var(--cs-light-02);
  height: 8px;
  width: 110px;
  border-radius: var(--radius-5);
}

.progress-bar {
  background-color: var(--cs-progress);
  height: 100%;
  border-radius: var(--radius-5);
}

.taskAndStages .row .col-lg-8 {
  padding-right: 0;
}

.messageWrap,
.progressCardBtm {
  display: flex;
  align-items: center;
}

.messageWrap span:nth-child(2) {
  margin-left: 7px;
}

.leftProgressWrap,
.rightProgressHeader {
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-5);
  background-color: var(--cs-background);
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
}

.leftProgressWrap:before {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 4px;
  background-color: var(--cs-progress);
  border-radius: var(--radius-5) 0 0 var(--radius-5);
  top: 0;
}

.rightProgressHeader:before {
  content: "";
  position: absolute;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: var(--cs-progress);
  border-radius: var(--radius-5) var(--radius-5) 0 0;
  top: 0;
  right: 0;
}

.rightProgressHeader .progressCardTop {
  margin-bottom: 0;
  justify-content: center;
}

.rightProgressHeader {
  padding: 14px 6px;
  position: relative;
  border-radius: var(--radius-3) var(--radius-3) 0 0;
}

/*Delete Task & Stage*/
.deleteTaskHighlight.leftProgressWrap,
.taskCard.deleteBlockHighlight .statusCard,
.deleteStageHighlight.rightProgressHeader {
  border: 1px solid var(--cs-dark-01);
}

.progressCardBtm span {
  font-size: 0.563rem;
  color: var(--cs-dark-03);
  font-weight: bold;
  padding-right: 4px;
}

ul.progressCards {
  margin-top: 8px;
}

.taskAndStages > div:nth-child(2).row {
  max-height: 355px;
  overflow-y: auto;
}

.addItem {
  text-align: center;
  padding: 8px 0;
}

.addItem span {
  display: inline-block;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.statusCard .status {
  display: flex;
  justify-content: center;
  align-items: center;
}

.statusCard {
  border: 1px solid var(--cs-progressCardBorder);
  border-radius: var(--radius-3);
  padding: 8px 5px;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.statusCard .userBlkWrap {
  margin-top: 0;
  border-top: none;
  justify-content: center;
  padding: 0;
  margin-bottom: 8px;
}

.statusCardList li {
  display: inline;
  width: 100%;
  height: 89px;
}

.statusCardList li:not(:last-child) {
  margin-right: 8px;
}

.statusCard p {
  color: var(--cs-dark-03);
  font-weight: 600;
  margin-bottom: 0;
  font-size: 0.75rem;
}

.STdone.statusCard p {
  color: var(--cs-color-done);
}

.SToverdue p,
.STblocked p {
  color: var(--cs-blocker);
}

.emptyStatus .status {
  opacity: 0;
}

.blocked2 {
  background-color: var(--cs-light-04);
}

.blocked2 span {
  display: none;
}

.projectView tr:not(thead tr):hover::before {
  z-index: -1;
  background-color: var(--cs-hoverShade-1);
}

.rightProgressHeader:hover,
.leftProgressWrap:hover {
  background-color: var(--cs-background);
  border: 1px solid var(--cs-secondary-b);
  box-shadow: 0px 8px 16px 0px rgba(90, 91, 106, 0.16),
    0px 4px 8px 0px rgba(58, 58, 68, 0.16);
}

p.stageheading {
  position: absolute;
  transform: rotate(-90deg);
  right: -8px;
  bottom: 20px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--cs-dark-03);
}

.taskheading {
  margin-bottom: 0;
  font-size: 0.625rem;
  font-weight: 700;
  position: absolute;
  bottom: 3px;
  color: var(--cs-dark-03);
}

.subtaskWrapperWhole {
  margin-top: 8px;
  position: relative;
  z-index: 0;
}

.addItem.item1 {
  cursor: pointer;
}

.donetext {
  display: none;
}

/* .firstTopic tr.not-empty td:first-child span {
  width: 100%;
} */

.tasktable tr.empty td:first-child {
  background: var(--cs-todo) no-repeat 15px 15px / 20px;
}

.tasktable tr.empty td:nth-child(3) {
  background: var(--cs-assign) no-repeat 15px 15px / 20px;
}

.tasktable tr.empty td:nth-child(4) {
  background: var(--cs-calendar) no-repeat 15px 15px / 20px;
}

.tasktable tr.empty td:nth-child(5) {
  background: var(--cs-priority) no-repeat 15px 16px / 16px;
}

.rightProgressHeader .progressCardTop input,
.rightProgressHeader .progressCardTop .stageNameSpan,
.leftProgressWrap input,
.leftProgressWrap .taskNameSpan {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: none;
  padding: 0;
  line-height: 1.2;
  background-color: transparent;
  cursor: pointer;
  font-weight: 600;
}

.rightProgressHeader .progressCardTop input,
.rightProgressHeader .progressCardTop input::placeholder,
.rightProgressHeader .progressCardTop .stageNameSpan {
  font-size: 0.75rem;
  text-align: center;
}

.rightProgressHeader .progressCardTop input::placeholder,
.leftProgressWrap .progressCardTop input::placeholder {
  font-weight: 400;
}

.leftProgressWrap input {
  font-size: 0.875rem;
  text-align: left;
}

.leftProgressWrap {
  width: 310px;
  height: var(--cs-grid-card);
  border-radius: var(--radius-3) 0 0 var(--radius-3);
  position: relative;
}

.stageHeader {
  width: 320px;
  position: relative;
  height: 54.5px;
  top: 0;
  z-index: 9;
  border-bottom: 1px dashed var(--cs-light-02);
  padding-right: 8px;
  background-color: var(--cs-background);
  border-right: 1px dashed var(--cs-light-02);
}

.halfAssigned .userAvtr {
  margin-right: 0;
}

.halfAssigned.statusCard .unassignedTask .userBlkWrap {
  justify-content: flex-start;
}

.subTaskWrap {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 8px;
  width: 100%;
}

.stageItemWrapper {
  display: flex;
  align-items: center;
  justify-content: start;
  top: 0;
  padding-left: 8px;
  z-index: 9;
  border-bottom: 1px dashed var(--cs-light-02);
  padding-bottom: 8px;
  background-color: var(--cs-background);
}

.stagesWrapper {
  position: sticky;
  padding-top: 10px;
  left: 0;
  z-index: 4;
  background-color: var(--cs-background);
  padding-left: 16px;
  margin-left: -16px;
}

.taskCard {
  width: var(--cs-grid-card);
  margin-right: 8px;
  flex: 0 0 var(--cs-grid-card);
  height: var(--cs-grid-card);
}

.stageItem {
  width: var(--cs-grid-card);
  margin-right: 8px;
  flex: 0 0 var(--cs-grid-card);
}

.gridWrapper {
  margin-left: -16px;
  overflow-x: auto;
  position: relative;
  z-index: 0;
  display: flex;
}

.taskItemLast {
  width: 310px;
  margin: 0;
  display: inline-block;
}

.gridWrapperWhole {
  position: relative;
  padding: 20px 0 0 6px;
}

.taskInnerWrap:first-child {
  margin-top: 16px;
}

.taskInnerWrap:not(:first-child) {
  padding-top: 8px;
  border-right: 1px dashed var(--cs-light-02);
  background-color: var(--cs-background);
}

.taskOuterWrap {
  padding-top: 10px;
  position: relative;
  z-index: 3;
  padding-left: 16px;
}

.rightProgressHeader::after,
.leftProgressWrap::after {
  position: absolute;
  content: "";
  background: var(--cs-drag-icon) no-repeat center / 16px;
  width: 18px;
  height: 18px;
  opacity: 0;
  cursor: move;
  left: -14px;
}

.rightProgressHeader::after {
  transform: translateX(-50%);
  left: 50%;
  top: -16px;
}

.leftProgressWrap::after {
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}

tr.not-empty td:first-child:after {
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
}

.rightProgressHeader:hover::after,
.leftProgressWrap:hover::after,
.leftProgressWrap:hover .delete-class,
.statusCard:hover .delete-class,
.rightProgressHeader:hover .delete-class,
tr.not-empty:hover td:first-child:after,
.taskNameHeadingPane:hover:after {
  opacity: 1;
}

.gridWrapper .delete-class {
  position: absolute;
  right: -5px;
  bottom: -5px;
  opacity: 0;
  font-size: 1.1rem;
  background-color: var(--cs-error-bg);
  height: 24px;
  width: 24px;
  border-radius: var(--radius-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cs-error);
}

.rightProgressHeader .delete-class {
  right: -5px;
  bottom: -5px;
  height: 20px;
  width: 20px;
  font-size: 1rem;
}

.tasktable input[type="date"] {
  padding: 11px 0 11px 25px;
}

/* .projectView .messageWrap{padding-top: 7px;} */
tr.not-empty {
  position: relative;
}

.gridWrapper .cmnIcon {
  width: 20px;
  height: 20px;
}

.gridWrapper .done,
.gridWrapper .overdue,
.gridWrapper .blocked {
  background-size: 16px;
}

.subtaskWrapperWhole .subTaskWrap,
.taskInnerWrap .leftProgressWrap {
  margin-bottom: 8px;
}

.contactPart .cmnIcon {
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  width: 20px;
  height: 20px;
}

.delete-project a {
  color: var(--cs-del-project);
}

.modal {
  display: none;
  position: fixed;
  padding-top: 150px;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(28, 29, 34, 0.7);
  z-index: 6;
}

.modal-content {
  margin: auto;
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  max-width: 682px;
  border-radius: var(--radius-4);
  background-color: var(--cs-background);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cs-light-01);
  padding: 12px 20px;
}

.modal-header h3,
.profileSettingsPage-content .modal-header h2 {
  font-size: 1.125rem;
  margin-bottom: 0;
}

.modal-body {
  padding: 20px;
}

.modal-body input,
.modal-body select {
  padding: 7px 12px;
}

.modal-body .projectFolder select {
  background: var(--cs-folder) no-repeat calc(1%) center,
    url(../images/icon-arrow-down.svg) no-repeat calc(100% - 10px) center / 10px;
  padding-left: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.createFolderField input {
  background: var(--cs-folder) no-repeat calc(1%) center;
  padding-left: 30px;
}

.projectPathCreateFolder .createNewFolder {
  margin-bottom: 16px;
}

.modal-body label,
.modal-body h4 {
  font-size: 0.875rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.modal-body .projectFolder select:focus,
.modal-body input:focus {
  border: 1px solid var(--cs-progress);
}

/* The Close Button */
.modal-close {
  color: var(--cs-dark-01);
  font-size: 18px;
  cursor: pointer !important;
}

.modal-close:hover,
.modal-close:focus {
  color: var(--cs-secondary-a);
  text-decoration: none;
  cursor: pointer;
}

.memberRoleWrap,
.memberRoleAction {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.userBlkWrap .userAvtr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-50);
}

.memberRoleWrap .userBlkWrap {
  padding-left: 0;
  border-top: 0;
}

.memberRoleWrap .userName {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
}

.memberRoleWrap .userEmail {
  font-size: 11px;
  color: var(--cs-neutral);
}

.modal-body > div:not(:last-child) {
  margin-bottom: 16px;
}

.memberRole select {
  padding: 8px 30px 8px 0;
  border: 0;
  width: 100%;
  text-align: left;
  font-size: 0.75rem;
}

.createFolderTextBox:not(:valid) ~ .closeIcon {
  display: none;
}

.createFolderField {
  position: relative;
  display: none;
}

.closeIcon {
  background: var(--cs-cancel) no-repeat center center / 20px;
  border: 1px solid transparent;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.cloneSectionTaskChckBxWrp .chckbxHolder {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 7px 0;
}

.cloneSectionTaskChckBxWrp label {
  position: relative;
  padding-left: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0;
  cursor: pointer;
}

.cloneSectionTaskChckBxWrp input {
  width: auto;
  accent-color: var(--cs-secondary-a);
  cursor: pointer;
}

.modal-footer {
  padding: 18px 25px;
}

.modal-footer .btnSec {
  display: flex;
  justify-content: end;
  align-items: center;
}

.modal-footer .btnSec .btnStyle1 {
  background-color: var(--cs-dark-01);
  padding: 10px 24px;
}

.modal-footer .btnSec .btnStyle1:hover {
  background-color: var(--cs-primary-b);
}

.deleteProjectModal .createCard,
.deleteFolderModal .createCard {
  border: none;
  max-width: 550px;
  margin: auto;
  cursor: inherit;
}

.deleteProjectModal .createCard p,
.deleteFolderModal .createCard p {
  margin-bottom: 0;
}

.deleteBtnStyle {
  background-color: var(--cs-blocker);
  border: 1px solid transparent;
}

.deleteBtnStyle:hover {
  background-color: var(--cs-del-project);
}

.itemListWrap .left,
.itemListWrap li {
  display: flex;
  align-items: center;
  line-height: 1;
}

.show-modal {
  display: block;
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.tasktable
  td:not(:first-child):not(:nth-child(2))
  .assigneeList
  span.categoryName {
  position: relative;
  top: 4px;
  left: 16px;
}
.assigneeListWithoutTable .assigneeList span.categoryName {
  position: relative;
  top: 4px;
  left: 36px;
}

.tasktable
  td:not(:first-child):not(:nth-child(2))
  .unassignUserBlkWrap
  span.categoryName {
  position: inherit;
}

.show {
  display: block;
}

.itemListWrap li {
  justify-content: space-between;
  cursor: pointer;
  padding: 7px 0;
}

.itemListWrap .left span:first-child {
  margin-right: 8px;
  cursor: move;
}

.blankCard {
  background-color: var(--cs-background);
}

.blankCard .cmnIcon,
.noAssignee .status .cmnIcon,
.halfAssigned .status .cmnIcon {
  background-repeat: no-repeat;
  background-position: calc(100% - 27px) center;
  background-size: 16px;
  width: 100%;
}

.blankCard .status,
.noAssignee .status,
.halfAssigned .status {
  border: 1px dashed var(--cs-light-01);
  padding: 2px 0;
  border-radius: var(--radius-5);
}

.halfAssigned .status {
  width: 48px;
}

.noAssignee .status .cmnIcon {
  width: 50px;
  background-position: calc(100% - 35px);
}

.blankCard .userAvtr,
.noAssignee > div > .userAvtr,
.taskCardDevClass.noAssignee.statusCard > .userBlkWrap > span > .userAvtr {
  background-color: transparent;
  border: 1px dashed var(--cs-light-01);
  margin-right: 0;
}

.taskCardDevClass.noAssignee.statusCard > .userBlkWrap {
  justify-content: center;
}

.blankCard .userAvtr,
.blankCard .status,
.taskCardDevClass.noAssignee.statusCard > .userBlkWrap > span > .userAvtr {
  opacity: 0;
}

.blankCard .userAvtr:hover,
.blankCard .status:hover,
.taskCardDevClass.noAssignee.statusCard:hover
  > .userBlkWrap
  > span
  > .userAvtr {
  opacity: 1;
}

.statusCard:hover {
  filter: drop-shadow(0px 4px 8px rgba(58, 58, 68, 0.16))
    drop-shadow(0px 8px 16px rgba(90, 91, 106, 0.16));
  border: 1px solid var(--cs-secondary-b);
  background-color: var(--cs-background);
}

.noAssignee .status,
.noAssignee > div > .userAvtr,
.halfAssigned .status {
  opacity: 0;
}

.noAssignee {
  background-color: transparent;
  border: 1px solid var(--cs-progressCardBorder);
}

.noAssignee:hover .status,
.noAssignee:hover > div > .userAvtr,
.halfAssigned:hover .status {
  opacity: 1;
  border: 1px dashed rgba(116, 121, 136, 0.5);
}

.noAssignee .userBlkWrap {
  position: relative;
  justify-content: start;
}

.noAssignee .userPart {
  display: flex;
}

.noAssignee.statusCard > div > .userAvtr,
.halfAssigned > div > .userAvtr {
  margin: auto;
}

.gridAssgineeList li {
  padding-left: 16px;
  padding-right: 16px;
}

.gridAssgineeList .addMemberlastItem {
  padding: 16px;
  position: sticky;
  bottom: 0;
  background-color: var(--cs-background);
}

.gridAssgineeList .addMemberlastItem .itemNameBlk.addFolder {
  margin-top: 0;
}

.unassignedTask .userAvtr {
  background: none;
}

.unassignedTask .cmnIcon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-50);
}

.taskNameHeadingPane .itemNameBlk > span:not(:last-child) {
  margin-right: 4px;
}

ul.filterSelectBoxWrap li .selectboxHolder {
  display: flex;
  align-items: center;
  justify-content: start;
}

ul.filterSelectBoxWrap li .selectboxHolder option {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cs-dark-01);
}

ul.filterSelectBoxWrap li .selectboxHolder label {
  margin-bottom: 0;
  flex: 0 0 80px;
  color: var(--cs-filter-label);
  font-size: 0.875rem;
}

ul.filterSelectBoxWrap li .selectboxHolder select {
  padding: 7px 12px;
}

.tasktable {
  margin-top: 16px;
  border-bottom: none;
}

.tasktable table tr {
  position: relative;
}

.tasktable table tr td::before {
  position: absolute;
  content: "";
  bottom: -1px;
  right: -2px;
  border-bottom: 1px solid var(--cs-light-02);
  width: calc(100% + 2px);
  height: 50px;
  background-color: transparent;
  z-index: -1;
}

.tasktable table tr:last-child td::before {
  display: none;
}

.tasktable table tr:last-child:before {
  border-bottom: 1px solid transparent;
}

.tasktable table tbody tr:first-child:before {
  border-top: 1px solid var(--cs-light-02);
}

.tasktable input[type="text"]:first-child {
  margin-bottom: 0;
  height: auto;
  padding-top: 0;
}

.tasktable .clearPriority span.verticalDot {
  margin-left: 40px;
  position: relative;
  top: 11px;
  opacity: 0;
}

.verticalDot {
  background-image: var(--cs-more-vertical);
}

.tasktable tr:hover .clearPriority span.verticalDot {
  opacity: 1;
}

.customPopover {
  position: absolute;
  background-color: var(--cs-dark-01);
  border-radius: 5px;
  padding: 5px 11px;
  color: var(--cs-background);
  font-size: 0.75rem;
  font-weight: 600;
  top: -36px;
  z-index: 3;
  opacity: 0;
}

.customPopover:after {
  content: "";
  position: absolute;
  background: var(--cs-popover) no-repeat center / auto;
  bottom: -4px;
  left: 50%;
  width: 10px;
  height: 5px;
  transform: translateX(-50%);
}

.ownTaskPopoverContent {
  right: 90px;
}

.doneTaskPopoverContent {
  right: 52px;
}

.filterTaskPopoverContent {
  right: 42px;
}

.show-input-val-block {
  position: absolute;
  opacity: 0;
  bottom: -18px;
  background: var(--cs-dark-01);
  padding: 6px;
  right: 0;
  left: 0;
  width: max-content;
  color: var(--cs-background);
  border-radius: var(--radius-3);
  font-size: 11px;
}

.text-input-box:hover .show-input-val-block {
  opacity: 1;
}

tr.not-empty form {
  position: relative;
  width: 100%;
}

/* .noSubmenu .itemNameBlk.haveSubItem {
  padding-left: 25px;
} */

/*Onboarding*/
.onboardingMainWrapper .setup-info-panel {
  height: 100vh;
  width: 100%;
  max-width: 47vw;
}

.onboardingMainWrapper {
  flex-direction: row;
}

.setup-info-panel .logo img {
  width: 195px;
  height: 40px;
  object-fit: contain;
}

.setupRightPanel {
  min-height: 100vh;
}

.setup-info-panel .logo {
  padding: 40px 48px;
}

.customizedTabNavigation .section-content {
  display: none;
  transition: 0.3s ease all;
  padding: 24px 48px;
  animation: FadeinUp 0.7s ease 1 forwards;
  transform: translateY(15px);
}

.customizedTabNavigation .section-content.active {
  display: block;
  transition: 0.3s ease all;
}

.fillCircle {
  height: 16px;
  width: 16px;
  border: 1px solid var(--cs-secondary-a);
  border-radius: var(--radius-50);
  display: block;
  cursor: pointer;
  transition: all ease 0.3s;
}

.customizedTabNavigation .tab-link {
  width: max-content;
}

.customizedTabNavigation .tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 80px;
  margin: auto auto 32px auto;
}

.onboarding.mainContent {
  margin: 0;
}

.radioHolder {
  display: flex;
  align-items: center;
  padding: 12px 0;
  position: relative;
}

.radioHolder input {
  width: auto;
  border: 1px solid var(--cs-placeholder);
  opacity: 0;
  position: absolute;
}

.radioHolder label {
  margin-bottom: 0;
  line-height: 1;
  padding-left: 38px;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  color: var(--cs-label);
}

.section-content .subHeading h2 {
  font-size: 1rem;
  margin-bottom: 8px;
  line-height: 1;
}

.section-content .subHeading p {
  color: var(--cs-subheading-desc);
}

.section-content .subHeading {
  margin-bottom: 24px;
}

.section-content h1 {
  font-size: 2rem;
  line-height: 1;
}

.userAvtr.userAvtrImg {
  background-color: transparent;
}

.customizedTabNavigation {
  margin-top: 40px;
  max-width: 700px;
}

.radioHolder label:after {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-50);
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  box-shadow: 0 0 0 1px var(--cs-placeholder);
  outline: 3px solid var(--cs-background);
  outline-offset: -3px;
  background-color: transparent;
}

.radioHolder input[type="radio"]:checked + label:after {
  background-color: var(--cs-secondary-a);
  outline: 3px solid var(--cs-periwinkle);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.radioHolder input[type="radio"]:checked + label::before {
  width: 40px;
  height: 40px;
  background-color: var(--cs-periwinkle);
  border-radius: var(--radius-50);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-10px, -10px);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.section-content .btnDiv {
  margin-top: 88px;
  display: flex;
  justify-content: right;
}

.workspace label,
.chipTextAreaLabel {
  position: absolute;
  transform: translateY(-50%);
  padding: 0 4px;
  top: 0;
  left: 14px;
  color: var(--cs-dark-01);
  width: fit-content;
  background-color: var(--cs-background);
  font-size: 0.75rem;
  pointer-events: none;
}

.workspace .fldWrap {
  position: relative;
}

.workspace .fldWrap input {
  border-radius: var(--radius-3);
  position: relative;
  z-index: 0;
}

.workspace .fldWrap input:focus ~ label {
  color: var(--cs-primary-a);
}

.workspace .fldWrap input:focus {
  border: 1px solid var(--cs-primary-a);
  filter: drop-shadow(0px 4px 8px rgba(58, 58, 68, 0.16))
    drop-shadow(0px 8px 16px rgba(90, 91, 106, 0.16));
}

.workspace label:before,
.chipTextAreaLabel:before {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  width: 100%;
  height: 14px;
  background: var(--cs-background);
  z-index: -1;
}

.workspace .fldWrap input:focus ~ label:before {
  background: linear-gradient(
    360deg,
    var(--cs-background),
    var(--cs-background),
    transparent
  );
  z-index: -1;
}

.logoFileInput {
  opacity: 0;
  position: relative;
  z-index: 2;
  padding: 0;
  cursor: pointer;
}

.uploadFileInputDiv {
  position: relative;
}

.uploadLogoDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}

.uploadLogoLeft {
  width: 140px;
  flex: 0 0 140px;
}

.uploadLogoLeft .userBlkWrap {
  justify-content: center;
  border-top: 0;
  padding: 0 16px 6px 16px;
  position: relative;
}

.uploadLogoLeft .deleteProfileImg {
  position: absolute;
  background: var(--cs-background);
  border-radius: 50%;
  right: -4px;
  bottom: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.uploadLogoLeft .userBlkWrap .userAvtr {
  margin-right: 0;
  height: 60px;
  width: 60px;
  flex: 0 0 60px;
  font-size: 1.5rem;
  font-weight: bold;
  position: relative;
}

.browseFilesSpan {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  cursor: pointer;
  color: var(--cs-secondary-a);
  font-size: 0.75rem;
  width: 100%;
  text-align: center;
  font-weight: 600;
  /* z-index: -1; */
}

input.fldError ~ .fileReqDesc {
  border-color: var(--cs-error);
}

.dragDrop span.fldMsg {
  position: absolute;
  bottom: -22px;
  left: 0;
  color: var(--cs-error);
}

input[type="file"]::-webkit-file-upload-button {
  cursor: pointer;
}

.uploadLogoInfo h2 {
  margin-bottom: 4px;
}

.uploadLogoInfo p {
  color: var(--cs-neutral);
}

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

.backBtn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

.completeProfileFields .fldWrap {
  width: 100%;
  margin-bottom: 16px;
}

.completeProfileFields > div:nth-child(3).row > div:nth-child(2).col {
  padding-left: 12px;
}

.completeProfileFieldsWrap.uploadLogoDiv {
  align-items: flex-start;
  max-width: 100%;
}

.collapsedSecondPanel .favStar {
  display: none;
}

.collapsedSecondPanel #wrapperul > li .itemNameBlk:before,
.collapsedSecondPanel #wrapperul > li li .itemNameBlk:before {
  display: none;
}

.collapsedSecondPanel .itemNameBlk.addFolder {
  display: none;
}

.completeProfileFields .example {
  color: var(--cs-neutral);
  font-size: 0.875rem;
  margin-top: 10px;
}

.completeProfileFieldTab .btnDiv .rightPart .noStyle2 {
  border: none;
  font-weight: 500;
}

.completeProfileFieldTab .btnDiv .rightPart {
  display: flex;
}

.completeProfileFieldTab .btnDiv {
  margin-top: 36px;
}

.newUserDefault .closeIconn {
  position: absolute;
  top: 25px;
  right: 25px;
}

.section-content.active {
  display: block;
  opacity: 1;
}

@keyframes FadeInUp {
  0% {
    transform: translateY(15px);
    opacity: 0;
  }

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

.newUserDefaultModalPage.mainWrapper {
  position: relative;
}

.newUserDefault {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--cs-background);
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-4);
  max-width: 1010px;
  padding-top: 46px;
  padding-bottom: 80px;
  width: 100%;
  z-index: 7;
}

.newUserDefault .templateWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 544px;
  margin: auto auto 40px auto;
}

.newUserDefault h2 {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1.25;
}

.newUserDefault .textContent {
  margin-bottom: 24px;
}

.newUserDefault .btnStyle4 {
  margin: auto;
}

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

.newUserDefault .optionCreateCustom span {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}

.newUserDefault .optionCreateCustom .btnStyle1 {
  background-color: var(--cs-dark-01);
  margin: auto;
  padding: 9px 24px;
}

.newUserDefault .optionCreateCustom .btnStyle1:hover {
  background-color: var(--cs-primary-b);
}

.newUserDefault .img-wrap {
  width: 170px;
  height: 150px;
  margin-bottom: 16px;
}

.newUserDefault .img-wrap img {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-4);
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.newUserDefaultModalPage.mainWrapper:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% + 350px);
  content: "";
  background-color: rgba(116, 121, 136, 0.6);
  backdrop-filter: blur(5px);
  z-index: 5;
}

#wrapperul > li .itemNameBlk input {
  width: calc(100% - 64px);
  padding: 0px 7px 0 0;
  border-radius: 0;
  justify-content: center;
  border-bottom: 1px solid var(--cs-light-01);
  border-top: none;
  border-left: none;
  border-right: none;
}

input.duplicateError {
  border: 1px solid var(--cs-error);
  background: var(--cs-error-bg-light);
  justify-content: center;
}

.profileCustomNavTab {
  position: relative;
  background-color: var(--cs-background);
  box-shadow: 0px 4px 8px rgba(58, 58, 68, 0.16),
    0px 8px 16px rgba(90, 91, 106, 0.16);
  border-radius: var(--radius-4);
  z-index: 6;
  width: 100%;
  height: 630px;
  overflow-y: auto;
}

.profileCustomNavTab .tabWrapper .tabContentWrap,
.profileCustomNavTabHeader {
  display: flex;
  justify-content: space-between;
}

.profileCustomNavTab .tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.profileCustomNavTab #secondTab,
.profileCustomNavTab #thirdTab,
.profileCustomNavTab #fourthTab,
.profileCustomNavTab #fifthTab,
.profileCustomNavTab #sixthTab,
.profileCustomNavTab #seventhTab {
  display: none;
}

.profileCustomNavTabHeader {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cs-light-01);
}

.profileCustomNavTabHeader h3 {
  margin-bottom: 0;
  font-size: 1.125rem;
}

.profileCustomNavTab .tabWrapper {
  padding: 40px 16px 40px 16px;
  max-width: 1000px;
  margin: auto;
}

.tabWrapper h5 {
  font-size: 0.75rem;
  margin-bottom: 8px;
}

.profileCustomNavTab .tablinks {
  padding: 13px 16px;
  background-color: transparent;
  width: 240px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
}

.profileCustomNavTab .tabContentWrap button:first-child.tablinks {
  border: 1px solid var(--cs-light-01);
}

.profileCustomNavTab .tab button:not(:last-child).tablinks {
  border-bottom: none;
  border-top: 1px solid var(--cs-light-01);
  border-right: 1px solid var(--cs-light-01);
  border-left: 1px solid var(--cs-light-01);
  cursor: pointer;
}

.profileCustomNavTab .tab button:first-of-type.tablinks {
  border-radius: var(--radius-5) var(--radius-5) 0 0;
}

.profileCustomNavTab .tab button:last-of-type.tablinks {
  border-radius: 0 0 var(--radius-5) var(--radius-5);
}

.profileCustomNavTab .tabcontent {
  padding-left: 80px;
  width: 100%;
  margin-right: auto;
  max-width: 710px;
}

.profileCustomNavTab .editProfile .userBlkWrap {
  padding: 0;
  display: block;
}

.profileCustomNavTab .editProfile .userBlkWrap .userAvtr {
  height: 104px;
  width: 104px;
  margin: auto;
  border-radius: var(--radius-50);
  background-color: transparent;
}

.profileCustomNavTab .editProfile .userBlkWrap .userAvtr .deleteProfileImg {
  bottom: 4px;
  right: 4px;
}

.profileCustomNavTab .editProfile {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 24px;
}

.editProfile .uploadLogoLeft {
  width: 104px;
}

.editProfile .btnStyle5 {
  width: 100%;
  padding: 5px 0;
  font-size: 0.875rem;
}

.editableFields .fldWrap {
  width: 100%;
  margin-bottom: 16px;
}

.editProfile .uploadFileInputDiv {
  margin-top: 16px;
}

.editProfile .uploadFileInputDiv button:first-child {
  margin-bottom: 8px;
}

.profileCustomNavTab .editableFields {
  width: 100%;
  margin-left: 40px;
  margin-top: 8px;
  margin-bottom: 32px;
}

.profileCustomNavTab .editableFields .row > div:nth-child(2).col {
  padding-left: 16px;
}

.saveChanges .bothStateCmnStyling {
  margin-left: auto;
  padding: 9px 25px;
  border-radius: var(--radius-3);
}

.profileCustomNavTab .tab button:last-child {
  border: 1px solid var(--cs-light-01);
  cursor: pointer;
}

.profileCustomNavTab .tab button:nth-child(7).tablinks {
  border-bottom: 1px solid var(--cs-light-01);
  cursor: pointer;
}

.profileCustomNavTab .tab h4 {
  font-size: 0.75rem;
  margin-bottom: 8px;
}

.profileCustomNavTab .tabcontent h4 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.emailPassChange .commonDiv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid var(--cs-light-01);
}

.emailPassChange .commonDiv .rightSec .noStyle2 {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.emailPassChange .emailChange .noStyle,
.emailPassChange .passChange .noStyle {
  color: var(--cs-secondary-a);
}

.emailPassChange .deleteAcc .noStyle {
  color: var(--cs-error);
}

.emailPassChange .commonDiv .leftSec {
  max-width: 550px;
}

.emailPassChange .commonDiv .leftSec p {
  color: var(--cs-subheading-desc);
}

.profileCustomNavTab .editableFields .row > div.col {
  width: 100%;
}

.profileSettingsModalDiv {
  padding: 30px 24px 30px 24px;
}

.tablinks.active {
  background-color: var(--cs-hoverShade-1);
}

.profileSettingsModalDiv .modal-content {
  max-width: 1390px;
  margin: auto;
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}

.newFolderFld {
  justify-content: center;
}

#wrapperul > li.noSubmenu .itemNameBlk:before {
  display: none;
}

.languagePart {
  padding-bottom: 32px;
  border-bottom: 1px solid transparent;
}

.time-zone {
  padding-top: 24px;
}

.checkboxHolder.timeZoneCheck input {
  width: 18px;
  height: 18px;
  margin-right: 15px;
  accent-color: var(--cs-secondary-a);
  cursor: pointer;
}

.checkboxHolder.timeZoneCheck {
  display: flex;
  padding-left: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.checkboxHolder.timeZoneCheck label {
  font-size: 0.875rem;
  cursor: pointer;
}

.languagePart select,
.time-zone select,
.sound select {
  max-width: 344px;
  font-weight: 500;
  font-size: 0.875rem;
}

.time-zone > p:first-of-type {
  margin-bottom: 18px;
}

.workspaceTab {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-5);
}

.mode-wrapper:not(.sound-switcher) .toggle-border {
  background: var(--cs-sun) no-repeat 15px / auto,
    var(--cs-moon) no-repeat 63px / auto;
  background-color: var(--cs-dark-01);
}

#toggle-mode-cb {
  display: none;
}

.toggle-mode .toggle-border {
  width: 90px;
  height: 32px;
  display: block;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
}

.toggle-mode .toggle-indicator {
  width: 48px;
  height: 24px;
  border-radius: 100px;
  position: absolute;
  background: var(--cs-background) var(--cs-sun) no-repeat center / auto;
  top: 4px;
  left: 4px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  box-sizing: border-box;
}

.mode-wrapper .mode {
  position: absolute;
  left: 106px;
  top: 4px;
}

.mode-wrapper {
  background-color: var(--cs-background);
  color: var(--cs-dark-01);
  display: flex;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.mode-wrapper .mode__light {
  opacity: 1;
}

.mode-wrapper .mode__dark {
  opacity: 0;
}

#toggle-mode-cb:checked + .mode-wrapper .mode__light {
  opacity: 0;
}

#toggle-mode-cb:checked + .mode-wrapper .mode__dark {
  opacity: 1;
}

#toggle-mode-cb:checked + .mode-wrapper .toggle-indicator {
  background: var(--cs-background) var(--cs-moon) no-repeat center / auto;
  left: calc(100% - 52px);
}

.toggleThemePart p:first-of-type {
  margin-bottom: 16px;
}

.themeRadioHolder label {
  border: 1px solid var(--cs-light-01);
  cursor: pointer;
}

.themeRadioHolder input {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  accent-color: var(--cs-secondary-a);
}

.themeRadioHolder .themeText {
  border-top: 1px solid var(--cs-light-01);
  padding: 10px 10px 10px 40px;
  display: flex;
  align-items: center;
}

.themeRadioHolder .themeText h5 {
  font-size: 0.875rem;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--cs-subheading-desc);
}
.themeRadioHolder input:checked ~ label .themeText h5 {
  color: var(--cs-background);
}

.themeRadioHolder {
  position: relative;
}

.themeVariation ul {
  display: flex;
  margin-left: -8px;
  margin-right: -8px;
}

.themeRadioHolder input:checked ~ label .themeText {
  background: var(--cs-logo-grad);
  border-top: 1px solid var(--cs-secondary-b);
}

.themeRadioHolder input:checked ~ label {
  border: 1px solid var(--cs-secondary-b);
}

.themeVariation ul li {
  margin: 0 8px;
}

.themeVariation {
  margin: 30px 0;
}

.sound {
  padding-top: 24px;
  border-top: 1px solid var(--cs-light-01);
  border-bottom: 1px solid var(--cs-light-01);
  padding-bottom: 32px;
}

#toggle-mode-cb2 {
  display: none;
}

.sound .toggle-mode .toggle-border {
  background-color: var(--cs-secondary-a);
  width: 52px;
  height: 32px;
  display: block;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
}

.sound-switcher .toggle-mode .toggle-indicator {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-50);
  position: absolute;
  background: var(--cs-background) no-repeat center / auto;
  top: 4px;
  left: 4px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  box-sizing: border-box;
}

.sound-switcher.mode-wrapper .mode {
  position: absolute;
  left: 66px;
  top: 20px;
}

.sound-switcher.mode-wrapper {
  background-color: var(--cs-background);
  color: var(--cs-dark-01);
  display: flex;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.sound-switcher.mode-wrapper .mode__light {
  opacity: 1;
}

.sound-switcher.mode-wrapper .mode__dark {
  opacity: 0;
}

#toggle-mode-cb2:checked + .sound-switcher.mode-wrapper .mode__light {
  opacity: 0;
}

#toggle-mode-cb2:checked + .sound-switcher.mode-wrapper .mode__dark {
  opacity: 1;
}

#toggle-mode-cb2:checked + .sound-switcher.mode-wrapper .toggle-indicator {
  background: var(--cs-background) no-repeat center / auto;
  left: calc(100% - 28px);
}

.toggleThemePart .mode p {
  margin-bottom: 0;
}

.projectActivityTable {
  margin-top: 40px;
}

.projectActivityTable table {
  width: 100%;
}

.projectActivityTable table th {
  font-size: 0.75rem;
  padding-bottom: 8px;
}

.projectActivityTable table th:first-child {
  text-align: left;
}

.projectActivityTable tbody tr td:first-child {
  padding: 13px 0 13px 24px;
  border-left: 1px solid var(--cs-light-01);
  width: 410px;
}

.projectActivityTable tbody tr td {
  border-top: 1px solid var(--cs-light-01);
  border-bottom: 1px solid var(--cs-light-01);
}

.projectActivityTable tbody tr td:last-child {
  border-right: 1px solid var(--cs-light-01);
}

.projectActivityTable tbody tr td input[type="checkbox"] {
  height: 18px;
  width: 18px;
  margin: auto;
  accent-color: var(--cs-secondary-a);
  cursor: pointer;
}

.projectActivityTable tbody tr:not(:first-of-type) td {
  border-top: none;
}

.accountItem,
.accountItem .leftSec {
  display: flex;
  align-items: center;
}

.accountItem .leftSec .imgWrap {
  flex: 0 0 48px;
}

.accountItem p {
  margin-bottom: 4px;
  font-size: 0.875rem;
  color: var(--cs-black);
}

.accountItem .leftSec span {
  font-size: 0.688rem;
  color: var(--cs-neutral);
}

.accountItem {
  justify-content: space-between;
  border: 1px solid var(--cs-connected-accounts-border);
  padding: 16px;
  margin-bottom: 16px;
}

.accountItem .rightSec .noStyle {
  padding: 0;
  color: var(--cs-secondary-a);
}

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

.accountItem .leftSec {
  width: calc(100% - 250px);
}

.accountItem .rightSec .btnStyle4 {
  border-color: var(--cs-secondary-a);
  color: var(--cs-secondary-a);
}

.accountItem .rightSec .btnStyle4:hover {
  border-color: var(--cs-dark-01);
  color: var(--cs-dark-01);
  background: transparent;
}

.tab-menuu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid var(--cs-light-01);
}

.tab-menuu ul li {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  text-align: center;
}

.tab-menuu ul li a {
  color: var(--cs-dark-01);
  font-weight: bold;
  padding: 8px 0;
  display: block;
  text-decoration: none;
  transition: none;
  border-bottom: 0;
  cursor: pointer;
}

.tab-menuu ul li a:hover {
  color: var(--cs-dark-01);
  text-decoration: none;
  border-bottom: 4px solid transparent;
}

.tab-box {
  display: none;
}

.tab-teaser {
  width: 100%;
  margin: 0 auto;
}

.tab-main-box {
  padding-top: 30px;
}

.editableFields .fldWrap input {
  color: var(--cs-dark-01);
}

.planDetails {
  padding: 16px 0 32px 0;
  border-top: 1px solid var(--cs-light-01);
}

.planDetails .PDH {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.planDetails .PDH h4 {
  margin-bottom: 0;
}

.planDetailsContent p {
  display: inline-block;
  min-width: 160px;
  margin-bottom: 0;
}

.freePlan {
  font-size: 0.563rem;
  color: var(--cs-dark-01);
  font-weight: bold;
  border: 1px solid var(--cs-light-01);
}

.planDetailsContent span {
  text-align: center;
  display: inline-block;
  min-width: 50px;
  padding: 6px 12px;
  border-radius: var(--radius-3);
  line-height: 1;
}

.planDetailsContent > div:not(:last-child) {
  margin-bottom: 8px;
}

.tab-box .editProfile {
  padding-bottom: 32px;
}

.defaultWorkspace {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--cs-light-01);
}

.defaultWorkspace .rightSec .noStyle {
  padding-top: 0;
  padding-bottom: 0;
  color: var(--cs-error);
}

.sound-switcher {
  padding-top: 16px;
  position: relative;
}

.section-text-input {
  padding: 0;
  border: none;
  font-size: 1rem;
  font-weight: 400;
}

.section-text-span {
  font-weight: 600;
  font-size: 1rem;
}

.section-text-input::placeholder {
  font-weight: normal;
  font-size: 0.875rem;
}

.taskNameHeadingPane .itemNameBlk > span.itemName {
  font-weight: 600;
  font-size: 1rem;
}

.modal.modal-open {
  overflow: hidden;
}

.teamActivity.projectActivityTable,
.projectActivityTable {
  border-collapse: collapse;
  border-spacing: 0;
}

.teamActivity.projectActivityTable th,
.teamActivity.projectActivityTable td,
.projectActivityTable th,
.projectActivityTable td {
  padding: 0;
}

.statusList .done ~ span {
  color: var(--cs-color-done);
}

.statusList .blocked ~ span {
  color: var(--cs-blocker);
}

tr.not-empty td:first-child .statusList .content span:first-child {
  width: 24px;
}

.statusList .content {
  display: flex;
  align-items: center;
  justify-content: start;
}

.statusList {
  left: 16px;
}

tr.not-empty td:first-child .statusList .content span:nth-child(2) {
  padding-left: 5px;
}

.unassignUserBlkWrap .categoryName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toggle-z-index {
  z-index: 1 !important;
}

.settingsBtnhighlighted {
  border: 1px solid var(--cs-primary-b);
}

.createNewProjectForm .modal-content {
  box-shadow: none;
  max-width: 100%;
  border-radius: 0;
  position: relative;
}

.memberRolesection {
  overflow-y: auto;
  max-height: calc(100vh - 450px);
}

.createNewProjectForm .modal-footer {
  padding: 0 15px;
  position: sticky;
  bottom: 0;
  background-color: var(--cs-background);
}

.createNewProjectForm .modal-body {
  padding: 16px 20px;
  height: 100%;
}

.createNewProjectForm .modal-footer .addFolder {
  margin-top: 0;
}

.createNewProjectForm .modal-content .projectMembers {
  height: auto;
  overflow: auto;
}

.th-div {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.createNewProjectForm .modal-header {
  padding: 16px 20px;
}

.tasktable td:not(:first-child):not(:nth-child(2)) span.verticalDot {
  left: 44px;
}

.removeMember .deleteFolderbtn {
  color: var(--cs-error);
  font-size: 16px;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
}

.memberRoleAction {
  max-width: calc(100% - 15px);
  width: 100%;
}

.workspace-member-heading,
.inviteMember {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workspace-member-heading {
  margin-bottom: 20px;
}

.workspace-member-heading input[type="search"] {
  max-width: 140px;
  background: var(--cs-search) no-repeat 0 10px / 17px;
  padding: 5px 0 5px 25px;
  border: 1px solid transparent;
  border-radius: 0;
}

.workspace-member-heading input[type="search"]::placeholder {
  font-size: 0.75rem;
  color: var(--cs-neutral);
  line-height: 1.5;
}

.workspace-member-heading input[type="search"]:focus {
  border-bottom: 1px solid var(--cs-dark-04);
}

.profileCustomNavTab .tabcontent .workspace-member-heading h4 {
  margin-bottom: 0;
  font-weight: 600;
}

.inviteMember .mergedFld input {
  padding: 8px 12px;
}

.inviteMember .mergedFld select {
  padding: 8px 30px;
  height: 48px;
  position: relative !important;
  width: 40% !important;
}
.inviteMember .mergedFld {
  display: flex;
  border: none;
  width: calc(100% - 160px);
}

.inviteMember {
  align-items: start;
}

.inviteMember .disabledBtn {
  padding: 10px 24px;
  cursor: not-allowed;
}

.body-overlay {
  position: relative;
}

.body-overlay:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: rgba(0, 0, 0, 0.7);
  z-index: 6;
}

.memberInviteTable th:first-child {
  width: 240px;
}

.memberInviteTable .th-div span {
  margin-left: 0;
}

.memberInviteTable .userBlkWrap {
  border-top: none;
}

.memberInviteTable th {
  font-size: 0.75rem;
  font-weight: normal;
  padding: 6px 16px;
}

.memberInviteTable table {
  border: 1px solid var(--cs-progressCardBorder);
  border-collapse: collapse;
  margin-top: 8px;
  width: 100%;
}

.memberInviteTable td {
  border-top: 1px solid var(--cs-progressCardBorder);
}

.memberInviteTable .memberRole select {
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
  background-color: transparent;
  cursor: pointer;
}

#step1-dot .fillCircle {
  background-color: var(--cs-secondary-a);
}

.memberInviteTable .th-div {
  align-items: center;
}

.projectsTable th:first-child {
  width: auto;
}

.projectsTable select {
  border: none;
  padding: 0;
  width: 140px;
  margin-left: auto;
  background-color: transparent;
  cursor: pointer;
}

.projectsTable td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.projectsTable td:first-child {
  padding-left: 16px;
}

.projectsTable td:last-child {
  padding-right: 16px;
}

.projectsTable th:nth-child(2) {
  padding-left: 0;
  padding-right: 0;
  width: 150px;
}

.projectsTable th:nth-child(3) {
  width: 172px;
}

.memberInviteTable th:last-child .th-div {
  justify-content: start;
}

.projectsTable .projectName a {
  color: var(--cs-secondary-b);
}

.projectsTable .private {
  display: flex;
  align-items: center;
  width: 140px;
  margin-left: auto;
}

.projectsTable .private span:nth-child(2) {
  padding-left: 5px;
}

.modalBilling.planDetails {
  padding-top: 10px;
  border-top: none;
  max-width: 704px;
}

li.independent-project:after {
  width: calc(100% - 20px);
  left: 10px;
}

.statusList .todo ~ span {
  color: var(--cs-dark-01);
}

.taskDueDate {
  padding: 4px 11px 4px 0;
}

.taskDueDateClear {
  display: block;
  text-decoration: underline !important;
  cursor: pointer;
  padding: 7px 0;
}

.taskDueDateClearDisable {
  opacity: 0.5;
  cursor: not-allowed !important;
  color: var(--cs-dark-02) !important;
}

.doneLeftProgressWrap,
.taskCardViewItem.doneLeftProgressWrap {
  background-color: var(--cs-status-done);
}

.mergedFld .ant-select-selector {
  border: none !important;
  /* box-shadow: none; */
  /* padding: 9px 11px !important; */
  height: 48px !important;
}

.mergedFld .ant-select-selector input {
  height: 48px !important;
}

.mergedFld.mt-10 {
  margin-top: 10px;
}

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

tbody tr.not-empty td:nth-child(3) span.calendar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-size: 18px;
}

.statusWrap .content span.cmnIcon {
  margin-right: auto;
  margin-left: 20px;
}
td.statusWrap .content img {
  max-width: 50px;
  cursor: pointer;
  margin-top: 5px;
}

.tasktable td:nth-child(4) span.message ~ span {
  right: -15px;
}

.tasktable td:not(:first-child):not(:nth-child(2)) .assigneeList .unassign,
.assignWrap .assigneeList .userBlkWrap .userAvtr {
  height: 30px;
  width: 30px;
  flex: 0 0 30px;
}

.tasktable td:not(:first-child):not(:nth-child(2)) .assigneeList .unassign {
  background-size: 9px;
  margin-left: 0;
}

.assignWrap .assigneeList .userBlkWrap .userAvtr {
  font-size: 0.75rem;
}

.tasktable tr.not-empty .assigneeList .userBlkWrap {
  width: 100%;
}

.assigneeList .userName p:first-child {
  margin-bottom: 0;
  line-height: 1.1;
}

.assigneeList .userName p:nth-child(2) {
  color: var(--cs-neutral);
  font-size: 11px;
}

.assigneeList .userName {
  padding-left: 4px;
}

.tasktable tr .tdInner span {
  margin-right: auto;
  margin-left: 22px;
}

tbody tr.not-empty td:nth-child(3) {
  min-width: 120px;
}

tbody tr.not-empty td:nth-child(3) span ~ div {
  padding-left: 26px;
}

.d-none {
  display: none;
}

.taskCard .userWrap {
  font-size: 9px;
  font-weight: 600;
  justify-content: space-between;
}

.gridWrapper .taskCard .message {
  height: 10px;
  width: 10px;
  background: var(--cs-message) no-repeat 100% center / 8px;
}

.taskCard .message:after {
  top: 0;
  height: 5px;
  width: 5px;
}

.tasktable table th:last-child {
  width: 60px;
}

.inlineProjectEditInputFieldClass {
  width: 400px;
  padding: 5px 10px 5px 1px;
  border-right: none;
  border-left: none;
  border-top: none;
  border-radius: 0;
  font-size: 1.125rem;
  font-weight: 500;
}

.inlineProjectEditInputFieldClass.duplicateProjectNameError {
  border-bottom: 1px solid var(--cs-blocker);
}

.taskDeleteCta {
  opacity: 0;
  transition: 0.2s ease-in all;
}

.tasktable table tbody tr:hover .taskDeleteCta {
  opacity: 1;
}

.actionBtnSec > li button.buttonSelected {
  background-color: var(--cs-hoverShade-1);
  border: 1px solid var(--cs-secondary-b);
}

.statusCard .deleteStatCard {
  position: absolute;
  right: 2px;
  bottom: 2px;
  opacity: 0;
  transition: 0.2s ease-in all;
}

.halfAssigned.statusCard .deleteStatCard {
  bottom: 10px;
}

.statusCard .deleteStatCard .deleteBin {
  background-size: 14px;
}

.statusCard:hover .deleteStatCard {
  opacity: 1;
}

.externalLinks a {
  display: flex;
  color: var(--cs-secondary-a);
  margin-bottom: 16px;
  align-items: center;
}

.externalLinks {
  margin-top: 16px;
}

ul.hdrSettingsDropdownMenu li:hover a {
  color: var(--cs-primary-a);
}

.memberInviteTable .userBlkWrap .userEmail {
  font-size: 0.75rem;
  color: var(--cs-neutral);
  font-weight: 500;
  line-height: 1;
}

.associatedUserWrapper {
  overflow-y: auto;
  max-height: calc(100vh - 450px);
  padding-bottom: 20px;
}

.profileCustomNavTab .tabcontent .inviteMember h4 {
  font-size: 0.875rem;
  margin-bottom: 0;
  font-weight: 600;
  padding-top: 10px;
}

.memberInviteTable td:nth-child(3) .deleteBin {
  opacity: 0;
  cursor: pointer;
}

.memberInviteTable tr:hover td:nth-child(3) .deleteBin {
  opacity: 1;
}

.memberInviteTable .userBlkWrap .userName {
  font-weight: 500;
}

.memberInviteTable tbody tr:hover {
  background-color: var(--cs-hoverShade-1);
}

.memberInviteTable.tab1Table th:nth-child(3) {
  width: 140px;
}

.RIbutton {
  border-radius: var(--radius-3);
  border: 1px solid var(--cs-primary-a);
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--cs-primary-a);
  background-color: transparent;
  cursor: pointer;
  width: 95px;
}

.resendInviteTableData .userAvtr {
  background-color: transparent;
  border: 1px dashed var(--cs-resend);
}

.resendInviteTableData .userEmail {
  color: var(--cs-resend);
}

.memberInviteTable.tab1Table tr td:nth-child(2) {
  text-align: right;
  width: 140px;
}

.memberInviteTable.tab1Table th:last-child {
  width: 30px;
}

.emptyStateAddTask {
  height: 100%;
  justify-content: center;
}

.emptyStateAddTask .addItem {
  display: flex;
  padding: 0;
  height: 16px;
  margin-right: 8px;
}

.emptyStateAddStage .addItem {
  padding: 0;
  height: 16px;
  margin-bottom: 2px;
}

.emptyStateAddStage .addItem span,
.emptyStateAddTask .addItem span {
  width: 16px;
  height: 16px;
}

.emptyStateAddStage {
  flex-direction: column;
}

.emptyStateAddTask h5,
.emptyStateAddStage h5 {
  font-size: 0.75rem;
  line-height: 1.3;
}

.emptyStateGrid .rightProgressHeader {
  padding: 7px 0 3px 0;
}

.emptyStateGrid .leftProgressWrap:after,
.emptyStateGrid .rightProgressHeader:after {
  display: none;
}

.dev-add-member.modal-footer {
  padding: 0;
}

.mrg-t8 {
  margin-top: 8px;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable select {
  color: var(--cs-primary-a);
  background: url(../images/icon-arrow-down.svg) no-repeat calc(100% - 10px)
    center / 10px;
  width: 120px;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable td:nth-child(3) select {
  width: 100px;
  padding-left: 0;
  padding-right: 0;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable table,
.CNPScreen .contentHeadingRightPart .memberInviteTable td {
  border: none;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable td:first-child {
  padding-left: 16px;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable td:last-child {
  padding-right: 16px;
}

.CNPScreen
  .contentHeadingRightPart
  .memberInviteTable
  .membersPanel
  .userAvtr:hover {
  transform: translate(0);
}

.CNPScreen .contentHeadingRightPart .memberInviteTable select option {
  color: var(--cs-primary-a);
}

.CNPScreen .contentHeadingRightPart .memberInviteTable .memberRole {
  width: 100px;
  margin-left: auto;
  text-align: right;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable td:nth-child(3) {
  width: 30px;
}

.memberPanelDropdownArea {
  position: relative;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable thead tr:hover {
  background-color: transparent;
}

.CNPScreen .contentHeadingRightPart .memberInviteTable th {
  padding: 0;
}

.CNPScreen .contentHeadingRightPart .memberPanelDropdownArea .tableHeading {
  padding-left: 16px;
  padding-right: 16px;
}

.CNPScreen .contentHeadingRightPart .membersList.show {
  display: table;
}

.CNPScreen .contentHeadingRightPart .memberInviteDiv {
  position: sticky;
  bottom: 0;
}

.CNPScreen .contentHeadingRightPart .memberInviteTableHolder {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.CNPScreen .contentHeadingRightPart .mergedFld select {
  position: relative;
}

.inviteFormFlds,
.inviteFormHolder .inviteFormHolderUpper {
  display: flex;
}

.CNPScreen .contentHeadingRightPart .inviteFormHolder select {
  background: url(../images/icon-arrow-down.svg) no-repeat calc(100% - 10px)
    center / 10px;
  color: var(--cs-primary-a);
  height: 100%;
}

.inviteFormFlds .emailFld input {
  padding: 8px 11px;
}

.inviteFormHolder {
  padding: 8px 16px 35px 16px;
}

.inviteFormHolder .inviteBtn {
  margin-left: 8px;
}

.inviteFormHolder .mergedFld {
  width: calc(100% - 100px);
}

.inviteFormHolder .inviteBtn .btnStyle3 {
  opacity: 0.2;
}

.memberInviteDiv {
  border-top: 1px solid var(--cs-light-01);
  padding-top: 16px;
}

.inviteFormHolder .infoText {
  position: absolute;
}

.inviteFormHolder .infoText p {
  color: var(--cs-subheading-desc);
  margin-top: 8px;
  font-weight: 500;
  font-size: 0.688rem;
}

.inviteFormHolder .mergedFld:hover,
.inviteFormHolder .mergedFld:focus-within {
  border: 1px solid var(--cs-secondary-a);
  box-shadow: 0px 4px 8px 0px rgba(90, 91, 106, 0.2),
    0px 2px 4px 0px rgba(58, 58, 68, 0.2);
}

.blankCard .userAvtr {
  margin-right: 0;
}

.blankCard .cmnIcon {
  background-position: calc(100% - 45px) center;
}

.memberPanelDropdownArea .memberInviteTable .RIbutton {
  border: none;
  padding: 0;
  width: auto;
  color: var(--cs-secondary-a);
}

.dropdown-toggle2 .dropdown-submenu {
  left: 268px;
  top: 214px;
}

.tab-menuu ul li a.active {
  border-bottom: 4px solid var(--cs-secondary-a);
}

.leftProgressWrap:hover::before,
.rightProgressHeader:hover::before {
  background-color: var(--cs-secondary-b);
}

.leftProgressWrap input::placeholder,
.rightProgressHeader input::placeholder {
  font-weight: 600;
  color: var(--cs-neutral);
  font-size: 0.875rem;
}

.taskCardViewItemWrapper {
  margin-top: 20px;
}

.createNewSecMainContent
  div:not(.tasktable):not(.taskNameHeadingPane).taskCardViewItemWrapper {
  padding-right: 0;
}

.taskCardViewItem .taskName del {
  text-decoration-style: double;
}

.taskCardViewItem .taskNameWrap,
.taskRelatedData,
.taskRelatedData .priorityInfo {
  display: flex;
  align-items: center;
}

.taskCardViewItem .assignWrap .userBlkWrap {
  border: none;
  padding: 0;
  cursor: pointer;
  width: 150px;
}

.taskCardViewItem .assignWrap {
  padding-left: 0;
  display: flex;
}

.taskRelatedData {
  margin-top: 2px;
}

.taskCardViewItem .taskNameWrap .taskName {
  padding-left: 14px;
  padding-right: 20px;
}

.taskCardViewItem {
  border: 1px solid var(--cs-progressCardBorder);
  padding: 14px 28px;
  margin-bottom: 10px;
  background-color: var(--cs-background);
  border-radius: var(--radius-3);
  position: relative;
}

.addtoPlanner button.btnStyle1 {
  font-size: 0.75rem;
  padding: 0;
  border-radius: var(--radius-3);
  background: transparent;
  border: none;
  color: var(--cs-secondary-a);
  text-decoration: underline;
}

.addtoPlanner {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 10px;
  opacity: 0;
}

.taskCardViewItem .assignWrap .userBlkWrap .userName {
  font-weight: 400;
  padding-left: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.taskRelatedData > div:not(:last-child) {
  margin-right: 24px;
}

.taskCardViewItem .priorityInfo .priorityName {
  padding-left: 4px;
}

.assignedBy .assignedByPerson {
  padding-right: 6px;
}

.taskCardViewItem:hover {
  border: 1px solid var(--cs-secondary-b);
  box-shadow: 0px 4px 8px 0px rgba(90, 91, 106, 0.2),
    0px 2px 4px 0px rgba(58, 58, 68, 0.2);
}

.taskCardViewItem .taskNameWrap .taskName ~ span.actionIons {
  display: inline-block;
  background-size: 20px;
  width: 20px;
  height: 20px;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.taskCardViewItem .taskNameWrap .taskName ~ span:not(:last-child).actionIons {
  margin-right: 8px;
}

.taskCardViewItem .assignWrap.assignedBy .userBlkWrap {
  padding-left: 0;
}

.taskCardViewItem:hover .addtoPlanner {
  opacity: 1;
}

.customDropDownItem {
  display: flex;
  align-items: self-end;
  padding: 3px 6px;
}

.customDropDownItem span:first-child {
  margin-right: 8px;
}

.ant-dropdown-menu-title-content
  ~ .ant-dropdown-menu-submenu-expand-icon
  .anticon-right {
  position: absolute;
  right: 10px;
  top: -18px;
  font-size: 0.75rem;
}

.ant-dropdown-menu .ant-dropdown-menu-item:hover {
  background-color: var(--cs-hoverShade-1) !important;
}

/***Textarea chip***/

.completeProfileFields {
  width: 100%;
}

.textArea-chip {
  width: 100%;
  height: auto;
}

.textArea-chip .react-tagsinput {
  position: relative;
  overflow: visible;
  padding-top: 13px;
  border-radius: 4px;
  padding-left: 5px;
  background-color: #fff;
  border: 1px solid var(--cs-light-01);
  height: 100%;
}

.textArea-chip .react-tagsinput-input {
  width: 100%;
  border: none;
  position: sticky;
  bottom: 0;
  right: 0;
  left: 0;
}

/* .textArea-chip input:focus {
  border-color: var(--cs-secondary-a);    filter: drop-shadow(0px 4px 8px rgba(58, 58, 68, 0.16)) drop-shadow(0px 8px 16px rgba(90, 91, 106, 0.16));
} */
.textArea-chip input:focus ~ .chipTextAreaLabel {
  color: var(--cs-primary-a);
}

/* .react-tagsinput {
  background-color: #fff;
  border: 1px solid var(--cs-secondary-a);
  overflow: hidden;
} */

.react-tagsinput-tag {
  background-color: var(--cs-primary-a);
  color: #fff;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 3px 14px;
  border-radius: var(--radius-3);
}

.react-tagsinput-remove {
  cursor: pointer;
  font-weight: bold;
  color: var(--cs-background);
  text-decoration: none;
  margin-left: 3px;
}

.react-tagsinput-tag a::before {
  content: "\2715";
}

.textArea-chip .react-tagsinput.react-tagsinput--focused {
  border-color: var(--cs-primary-a);
  filter: drop-shadow(0px 4px 8px rgba(58, 58, 68, 0.16))
    drop-shadow(0px 8px 16px rgba(90, 91, 106, 0.16));
}

.taskCard span.defaultSticker {
  background-position: center;
  background-size: 25px;
}

.profileSettingsPage.profileSettingsModalDiv {
  display: block;
}

.profileSettingsPage .profileCustomNavTab {
  height: auto;
  box-shadow: none;
}

.profileSettingsPagemainContent {
  margin-left: 72px;
}

.profileSettingsPage-content .profileCustomNavTab .tabWrapper {
  max-width: 100%;
  padding: 40px 24px;
}

.profileSettingsPage-content .modal-header {
  padding: 16px 24px;
}

.profileSettingsPage-content .workspaceTab {
  margin-top: 0;
}

.profileSettingsPage-content .generalSettings {
  margin-top: 32px;
}

.profileSettingsPage-content .profileCustomNavTab .tablinks {
  display: block;
  cursor: pointer;
}

.tab-menu2 ul {
  display: inline-flex;
  border: 1px solid var(--cs-light-01);
  padding: 4px 0;
  border-radius: var(--radius-3);
}

.tab-menu2 ul li a {
  text-decoration: none;
  padding: 7px 18px;
  line-height: 1;
  border-radius: var(--radius-3);
}

.tab-menu2 ul li a.active {
  background-color: var(--cs-secondary-a);
  color: var(--cs-background);
  font-weight: 500;
}

.inviteMember .htmlClass.mergedFld input {
  padding: 12px;
}

.statusUpdateVariationRadioWrapper .radioWrapper {
  position: relative;
  max-width: 344px;
  margin-bottom: 8px;
}

.statusUpdateVariationRadioWrapper .radioWrapper input {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  accent-color: var(--cs-secondary-a);
}

.statusUpdateVariationRadioWrapper .radioWrapper label {
  display: block;
  padding-right: 29px;
  cursor: pointer;
  border: 1px solid transparent;
}

.statusUpdateVariationRadioWrapper .radioWrapper .labelWrap {
  display: flex;
  justify-content: space-between;
  padding-left: 40px;
  align-items: center;
}

.statusUpdateVariationRadioWrapper .radioWrapper .labelWrap P {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--cs-subheading-desc);
  line-height: 2.7;
}

.statusUpdateVariationRadioWrapper .radioWrapper input:checked ~ label,
.statusUpdateVariationRadioWrapper .radioWrapper:hover label {
  border: 1px solid var(--cs-secondary-b);
  background-color: var(--cs-hoverShade-1);
  border-radius: var(--radius-5);
}

.customStatusUpdateWrapper {
  padding-top: 24px;
}

/*this class used for overide antd divider border style*/
.memopadDivider {
  border-block-color: var(--cs-secondary-a) !important;
  border-block-start-width: 3px !important;
}

.memopadEmptyContainer {
  position: relative;
}

.memopadPlusIcon {
  background-color: var(--cs-secondary-a);
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  width: 20px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-image: url("../images/add-plus.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.userInformation {
  text-align: center;
  color: var(--cs-dark-02);
}

.ce-block__content {
  max-width: 600px !important;
  margin-left: 30px;
}
.ce-toolbar__content {
  max-width: 100% !important;
  margin-left: 35px;
  top: 3px;
}

.ce-toolbox .ce-popover.ce-popover--opened {
  width: 550px !important;
  display: block;
  max-height: 180px;
  overflow: revert;
  background-color: white;
  position: absolute;
  border-color: #e6dffb;
  border-width: 2px;
  transform: translateX(-50%);
  z-index: 10;
  padding: 16px;
}

.ce-toolbox .ce-popover__items {
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin: 0 -5px;
}

.ce-toolbox .cdx-search-field.ce-popover__search,
.ce-settings .cdx-search-field.ce-popover__search {
  display: none;
}

.ce-toolbox .ce-popover-item {
  display: flex;
  flex-direction: column;
  padding: 3px 8px;
  border: 1px solid var(--cs-CNPscreen-star);
  margin: 0 5px;
}

.ce-toolbox .ce-popover-item:hover {
  background-color: var(--cs-hoverShade-1);
  border-color: var(--cs-secondary);
}

.ce-toolbox .ce-popover-item__icon {
  box-shadow: none;
  margin-right: 0;
  background-color: transparent;
}

.ce-toolbox .ce-popover-item[data-item-name="header"],
.ce-toolbox .ce-popover-item[data-item-name="CodeTool"],
.ce-toolbox .ce-popover-item[data-item-name="image"],
.ce-toolbox .ce-popover-item[data-item-name="list"],
.ce-toolbox .ce-popover-item[data-item-name="sticker"] {
  display: none;
}

.ce-toolbox .ce-popover-item[data-item-name="paragraph"] {
  order: 1;
}

.ce-toolbox .ce-popover-item[data-item-name="linkTool"] {
  order: 2;
}

.ce-toolbox .ce-popover-item[data-item-name="attachment"] {
  order: 3;
}

.ce-toolbox .ce-popover-item[data-item-name="recorder"] {
  order: 4;
}

.ce-toolbox .ce-popover-item[data-item-name="table"] {
  order: 5;
}

.ce-toolbox .ce-popover-item[data-item-name="checklist"] {
  order: 6;
}

.ce-toolbox .ce-popover-item[data-item-name="delimiter"] {
  order: 7;
}

.ce-toolbox .ce-popover-item[data-item-name="toggleBlock"] {
  order: 8;
}

.ce-toolbox .ce-popover-item[data-item-name="alert"] {
  order: 9;
}

.ce-toolbox .ce-popover-item[data-item-name="contentEmbed"] {
  order: 10;
}

.ce-toolbox .ce-popover-item__icon svg {
  width: 50px;
  height: 50px;
  color: var(--cs-text);
}

.ce-toolbox .ce-popover-item:hover .ce-popover-item__icon svg {
  color: var(--cs-neutral);
}

.ce-toolbox .ce-popover.ce-popover--opened::after {
  /* (B1-1) ATTACH TRANSPARENT BORDERS */
  content: "";
  border: 20px solid transparent;

  /* (B1-2) NECESSARY TO POSITION THE "TAIL" */
  position: absolute;
  /* (C1-1) UP TRIANGLE */
  border-bottom-color: #e6dffb;
  border-top: 0;
  /* (C1-2) POSITION AT TOP */
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

.ce-toolbar__content .ce-toolbar__plus {
  visibility: hidden;
}

.ce-popover-item__title {
  font-family: var(--cs-font-1);
  font-size: 9px;
  font-weight: 700;
  color: var(--cs-text);
  line-break: anywhere;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
  line-height: 14px;
  text-align: center;
}

.codex-editor {
  z-index: revert;
}

:where(.css-dev-only-do-not-override-ed5zg0).ant-select
  .ant-select-arrow
  .anticon {
  display: none;
}

.inviteMember .mergedFld:focus-within,
.mergedFld:hover {
  border: none;
}

.inviteMember .mergedFld .ant-select {
  border: 1px solid var(--cs-light-01);
  color: var(--cs-text);
  border-radius: 5px;
}

.ant-select-selection-item.error {
  background-color: var(--cs-error-bg);
  border: solid 1px var(--cs-error-border);
  color: var(--cs-error);
}

.ant-select-selection-item.error .ant-select-selection-item-remove {
  color: var(--cs-error);
}

.ant-select-selection-item.error .ant-select-selection-item-remove:hover {
  color: var(--cs-error-border);
}

.inviteMember .mergedFld .ant-select-selector {
  height: auto !important;
  max-height: 300px;
}

.inviteMember
  .ant-select.ant-select-multiple.ant-select-show-arrow.ant-select-show-search
  .ant-select-selector {
  /* padding: 0 5px !important; */
  border-radius: 5px;
}

.inviteMember .mergedFld:hover,
.inviteMember .mergedFld:focus-visible,
.inviteMember .mergedFld:focus-within {
  border: none;
}

.smallInformation {
  color: var(--cs-neutral);
  font-size: 12px;
  margin-top: 3px;
}

.switchText {
  padding-left: 10px;
}

.selectPlanRadioWrapper .themeRadioHolder label {
  border-radius: var(--radius-3);
}

.selectPlanRadioWrapper .themeRadioHolder input {
  top: 30px;
  left: 16px;
}

.selectPlanRadioWrapper .themeRadioHolder .themeText {
  justify-content: center;
  padding-left: 10px;
  border-radius: 0 0 var(--radius-3) var(--radius-3);
}

.selectPlanRadioWrapper .annualProPlan p:first-child {
  font-weight: 400;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--radio-header-body-divider);
  padding-bottom: 16px;
}

.selectPlanRadioWrapper .annualProPlan p:first-child span {
  color: var(--cs-secondary-a);
  font-weight: 700;
}

.selectPlanRadioWrapper .radioContent {
  padding: 16px 52px;
}

.selectPlanRadioWrapper .radioContent .perks ul li {
  font-size: 0.875rem;
  font-weight: 400;
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.selectPlanRadioWrapper .radioContent .perks ul li::before {
  content: "";
  position: absolute;
  background: var(--checkItem) no-repeat center;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
}

.selectPlanRadioWrapper .radioContent .perks h4 {
  margin-bottom: 16px;
}

.selectPlanRadioWrapper .themeRadioHolder input:checked ~ label {
  border: 1px solid var(--cs-secondary-a);
}

.selectPlanRadioWrapper .themeRadioHolder input:checked ~ label .themeText {
  border-top: none;
}

.selectPlanRadioWrapper .monthlyProPlan p,
.freePlanItem p {
  margin-bottom: 0;
}

.formUpgradeDrawer .modal-body h3 {
  margin-bottom: 20px;
}

.creditCardDetails {
  margin-bottom: 16px;
}

.creditCardDetails input[type="text"] {
  background: var(--credit-card) no-repeat 10px 16px / 17px;
  border: none;
  padding-left: 20px;
}

.creditCardDetails .inputWrap input {
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-3);
  padding: 12px 36px;
}

.creditCardDetails .inputWrap {
  position: relative;
}

.creditCardDetails .inputWrap .rightSidePlaceholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}

.creditCardDetails .inputWrap .rightSidePlaceholder span {
  color: var(--cs-resend);
}

.creditCardDetails label,
.promoCode label {
  font-size: 0.75rem;
  font-weight: 600;
}

.promoCode .applyBtn {
  background-color: var(--cs-secondary-a);
  border: 1px solid var(--cs-secondary-a);
  border-radius: var(--radius-3);
  margin-left: 8px;
  width: 88px;
}

.promoCode .inputWrap {
  display: flex;
}

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

.formUpgradeDrawer .modal-body .projectName > div {
  margin-bottom: 32px;
}

.formUpgradeDrawer .modal-footer {
  padding-top: 10px;
  padding-bottom: 10px;
}

.proPlanChip {
  background-color: var(--cs-dark-01);
  color: var(--cs-background);
  font-size: 0.563rem;
  font-weight: 700;
}

.planDetailsContent span.proPlanChip {
  padding: 8px 12px;
}

.proPlanWrapper .planDetailsContent .one .noStyle {
  color: var(--cs-secondary-a);
  cursor: pointer;
}

.proPlanWrapper .planDetailsContent .two span,
.proPlanWrapper .planDetailsContent .three span {
  padding-left: 0;
  padding-right: 0;
}

.planInvoiceTable {
  padding-top: 30px;
}

.planInvoiceTable table th {
  text-align: left;
  font-weight: 400;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--cs-progressCardBorder);
  border-top: 1px solid var(--cs-progressCardBorder);
  padding-top: 6px;
  padding-bottom: 6px;
}

.planInvoiceTable table td {
  font-weight: 500;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--cs-progressCardBorder);
}

.invoiceStatContent p {
  margin-bottom: 0;
}

.planInvoiceTable table {
  width: 100%;
}

.planInvoiceTable table td:first-child,
.planInvoiceTable table th:first-child {
  border-left: 1px solid var(--cs-progressCardBorder);
  padding-left: 16px;
}

.planInvoiceTable table td:last-child,
.planInvoiceTable table th:last-child {
  border-right: 1px solid var(--cs-progressCardBorder);
  padding-right: 16px;
}

.invoiceStatContent .externalLinks {
  margin-top: 5px;
  height: 50px;
}

.proPlanWrapper .planDetailsContent {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--cs-light-01);
}

.freePlanRadioItem .instruction {
  color: var(--cs-del-project);
  padding-left: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  padding-bottom: 16px;
}

.profileSettingsPagemainContent .modal-header .content {
  display: flex;
  align-items: center;
}

.profileSettingsPagemainContent .modal-header .content h3 {
  padding-left: 10px;
}

.statusCard .taskDueDateGridList {
  padding: 2px 0;
}

.statusCard .taskDueDateGridList .ant-picker-input,
.taskDueDate .ant-picker-input input {
  font-size: 9px;
  font-weight: 600;
}

.completeTaskCard .ant-picker-input input {
  max-width: 35px;
}

.completeTaskCard.taskDueDateGridList {
  padding: 0;
}

.radioItemHolder .ant-radio input.ant-radio-input ~ span {
  height: 20px;
  width: 20px;
}

.radioItemHolder .ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
  transform: scale(1) translate(8%, 8%);
  opacity: 1;
  transition: all 0.2s ease;
  background-color: var(--cs-secondary-a);
  outline: 3px solid var(--cs-periwinkle);
  -webkit-transition: all 0.2s ease;

  width: 14px;
  height: 14px;
  /* padding: 4px; */
}

.radioItemHolder .ant-radio-wrapper .ant-radio-inner {
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--cs-placeholder);
}

.radioItemHolder .ant-radio-wrapper .ant-radio-inner::after {
  box-sizing: border-box;
  position: absolute;
  transform: translate(10px, 10px) scale(0);
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-block-start: 0;
  border-inline-start: 0;
  border-radius: 16px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  content: "";
}

.radioItemHolder .ant-radio-input:checked ~ span.ant-radio-inner:before {
  width: 40px;
  height: 40px;
  background-color: var(--cs-periwinkle);
  border-radius: var(--radius-50);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-11px, -11px);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: -1;
}

.radioItemHolder .ant-space-item {
  margin-bottom: 16px;
}

.radioItemHolder .ant-radio-wrapper .ant-radio {
  margin-right: 10px;
}

.section-content .disabledBtn {
  padding: 8px 24px;
  cursor: not-allowed;
}

.section-content .fldWrap .ant-input {
  padding: 11px;
  font-size: inherit;
}

.defaultUserLogo span.unassign {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 20px;
}

.uploadFileInputDiv .ant-upload a {
  color: var(--cs-secondary-a);
}

.section-content .fldWrap .ant-input:hover {
  border-color: var(--cs-primary-a);
}

.section-content .fldWrap .fldError {
  position: absolute;
  left: 0;
  bottom: -18px;
}

.completeProfileFieldsDevClass.completeProfileFields .fldWrap {
  margin-bottom: 34px;
}

.overdueStatusCard.statusCard .userName,
.overdueStatusCard.statusCard .date,
.blockedStatusCard.statusCard .userName,
.blockedStatusCard.statusCard .date {
  color: var(--cs-blocker);
}

.taskCard.doneTaskCard .statusCard {
  background-color: var(--cs-status-done);
}

.nonHighlightedTaskCard {
  opacity: 0.4;
}

.signupPage.loginWrapper .leftImg {
  background: var(--cs-signUp) no-repeat center/auto;
  width: 50%;
  display: block;
  height: 100vh;
  background-size: cover;
}

.loginPage.loginWrapper .leftImg {
  background: var(--cs-login) no-repeat center/auto;
  width: 50%;
  height: 100vh;
  display: block;
  background-size: cover;
}

.loginWrapper h1 {
  margin-bottom: 0;
  position: absolute;
  right: 40px;
  bottom: 40px;
}

.zoomSliderWrap {
  position: relative;
  margin: 20px 0 30px 0;
}

.zoomSliderWrap .ant-slider {
  margin: 11px 65px;
}

.zoomSliderWrap .zoomOutBtnWrap,
.zoomSliderWrap .zoomInBtnWrap {
  position: absolute;
  top: -8px;
}

.zoomSliderWrap .zoomOutBtnWrap {
  left: 0;
}

.zoomSliderWrap .zoomInBtnWrap {
  right: 0;
}

.imageCropperModalWrap .btnOk {
  background-color: var(--cs-primary-a);
}

.imageCropperModalWrap .btnOk:hover {
  background-color: var(--cs-primary-b);
}

.imageCropperModalWrap .btnCancel:hover,
.imageCropperModalWrap .btnCancel:focus {
  border: 1px solid transparent;
  color: var(--cs-primary-b);
}

.uploadLogoLeft .deleteProfileImg .deleteBin {
  background-size: 14px;
}

.completeProfileFieldsDevClass .ant-select-single {
  width: 100%;
}

.completeProfileFieldsDevClass
  .ant-select-selector
  .ant-select-selection-search-input,
.completeProfileFieldsDevClass .ant-select-selector {
  height: 44px !important;
}

.completeProfileFieldsDevClass .ant-select-selector {
  align-items: center;
}

.plannerMainContent .contentHeadingRightPart .hdrDropdownToggle span::before {
  display: none;
}
.plannerMainContent .contentHeadingRightPart .hdrDropdownToggle span {
  margin-left: 0;
}
.plannerMainContent .contentHeadingRightPart .hdrDropdownToggle {
  padding-left: 10px;
}
.plannerMainContent .CNPScreen .itemName {
  font-weight: 700;
}
.plannerPageTaskMainContent {
  display: flex;
  align-items: start;
  padding: 8px 16px;
  justify-content: space-between;
}
.plannerPageTaskMainContent .miniCalendarPanel .subMenuItem {
  display: none;
  margin-top: 4px;
}
.plannerPageTaskMainContent .miniCalendarPanel .subMenuItem.show {
  display: block;
}
.plannerMainContent .contentHeadingPanel {
  padding-left: 16px;
  padding-right: 16px;
}
.plannerPageTaskMainContent .collapsableMenuWrap .haveSubItem .addSection {
  margin-right: 0;
}
.plannerPageTaskMainContent .collapsableMenuWrap .haveSubItem {
  justify-content: space-between;
}
.plannerPageTaskMainContent .collapsableMenuWrap .haveSubItem span.cmnIcon,
.plannerPageTaskMainContent
  .collapsableMenuWrap
  .haveSubItem
  span.sidePanelIcon {
  cursor: pointer;
}
.plannerPageTaskMainContent .cloneSectionTaskChckBxWrp input {
  width: 18px;
  height: 18px;
  accent-color: var(--cs-secondary-a);
}
.plannerPageTaskMainContent .collapsableMenuWrap .haveSubItem .itemName {
  font-size: 1rem;
  font-weight: 700;
}
.plannerPageTaskMainContent .collapsableMenuWrap {
  margin-bottom: 36px;
}
.showTaskPanelHeading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.showTaskPanel {
  max-width: 280px;
  padding: 16px 0 16px 16px;
}
.miniCalendarPanel {
  max-width: max-content;
  width: 100%;
  padding: 16px 0;
  position: absolute;
  left: 80px;
  height: 100vh;
  background: var(--cs-background);
}
.taskAssignedCalendarPanel {
  width: 100%;
}
.taskCalendarWrap img,
.miniCalendarWrap img {
  width: 100%;
}

.showTaskPanelHeading .addplus {
  background: var(--cs-secondary-a) var(--cs-addPlus) no-repeat center center /
    10px;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.showTaskPanelHeading h3 {
  margin-bottom: 0;
}
.showTaskPanelHeading .cmnIcon {
  cursor: pointer;
}
.dueTaskItem .taskCardViewItem {
  padding: 8px;
}

.dueTaskItem .taskCardViewItem .assignWrap .userBlkWrap {
  padding-left: 0;
}
.dueTaskItem .taskRelatedData,
.dueTaskItem .taskRelatedData .userName {
  font-size: 0.75rem;
}
.dueTaskItem .taskRelatedData > div:not(:last-child) {
  margin-right: 20px;
}

.dueTaskItem h4 {
  margin-bottom: 0;
  cursor: pointer;
}
.dueTaskItem {
  margin-top: 16px;
}
.dueTaskItemHeading {
  justify-content: space-between;
  margin-bottom: 8px;
}
.dueTaskItem.haveSubItem .subMenuItem {
  display: block;
}
.dueTaskItem .subMenuItem.hide {
  display: none;
}
.taskCardViewItem .taskRelatedData .projectWrap a {
  color: var(--cs-secondary-a);
}

.createNewProjectForm .modal-body div:first-child.customStatusUpdateWrapper {
  padding-top: 0;
}
.createNewProjectForm
  .modal-body
  .customStatusUpdateWrapper
  .customStatusUpdate {
  margin-bottom: 16px;
}
.createNewProjectForm .statusUpdateVariationRadioWrapper .radioWrapper {
  max-width: 100%;
}
/* .createNewProjectForm  .statusUpdateVariationRadioWrapper .radioWrapper label{border: 1px solid transparent;} */
.createNewProjectForm
  .customizeTaskName
  .statusUpdateVariationRadioWrapper
  .radioWrapper
  .labelWrap {
  padding: 5px 0 5px 40px;
  justify-content: space-between;
}
.createNewProjectForm
  .customizeTaskName
  .statusUpdateVariationRadioWrapper
  .radioWrapper
  input {
  bottom: 15px;
}
.createNewProjectForm
  .customizeStickerImg
  .statusUpdateVariationRadioWrapper
  .radioWrapper
  .labelWrap {
  justify-content: start;
  padding: 15px 0 15px 40px;
}
.createNewProjectForm
  .customizeStickerImg
  .statusUpdateVariationRadioWrapper
  .radioWrapper
  .labelWrap
  img {
  margin-right: 32px;
}
.customizeStatusUpdateDrawer {
  overflow: auto;
}
.customizeStatusUpdateDrawer .modal-footer {
  padding-bottom: 10px;
  padding-top: 10px;
}

.createNewProjectForm
  .customizeStickerImg
  .statusUpdateVariationRadioWrapper
  .radioWrapper
  input {
  bottom: 25px;
}
/* .createNewProjectForm .customizeTaskName  .statusUpdateVariationRadioWrapper .radioWrapper input:checked~label,.createNewProjectForm .customizeTaskName  .statusUpdateVariationRadioWrapper .radioWrapper input:hover~label{border: 1px solid var(--cs-light-01);background-color: transparent;} */

.leftProgressWrap span.deleteBin.cmnIcon {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background-size: 14px;
  opacity: 0;
}

.stageItemWrapper span.deleteBin {
  position: absolute;
  background-size: 14px;
  bottom: 0;
  right: 0;
  opacity: 0;
}

.leftProgressWrap:hover span.deleteBin.cmnIcon {
  opacity: 1;
}

.stageItemWrapper .stageItem:hover span.deleteBin {
  opacity: 1;
}

.statusCard span.calendar.noTaskDueDate {
  background-size: 14px;
  background-position: 0px;
  width: 30px;
  height: 13px;
}
.gridAssgineeList .userName:not(span) {
  color: var(--cs-primary-a) !important;
}

span.closeAssigneeList {
  background-size: 12px;
  top: 10px;
  position: absolute;
  right: 10px;
  cursor: pointer;
}

span.editable-text:focus {
  outline: none;
}
.taskEditIcons {
  display: none;
  background-size: 20px;
  width: 20px;
  height: 20px;
}
.startDateEndDate {
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.startDateEndDate .dateWrap .inputHolder {
  justify-content: space-between;
  width: 305px;
}
.startDateEndDate .dateWrap .inputHolder input:not(:first-child) {
  margin-left: 14px;
}
.startDateEndDate .midText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
}
.repeatation .cloneSectionTaskChckBxWrp {
  max-width: 310px;
  justify-content: space-between;
}
.repeatation .cloneSectionTaskChckBxWrp .selectRepeat {
  width: 195px;
}
.radioItem input {
  position: absolute;
  left: 0;
  top: 4px;
  accent-color: var(--cs-secondary-a);
  height: 17px;
  width: 17px;
}

.radioItem {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.radioItem label {
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;
}

.teamName .radioboxHolder {
  margin-top: 10px;
}
.createNewProjectFormNewPlannerEntryDrawer {
  overflow: auto;
}
.createNewProjectFormNewPlannerEntryDrawer .description .img-wrap img {
  width: 100%;
}
.createNewProjectFormNewPlannerEntryDrawer .modal-footer {
  padding-right: 0;
}

.deleteTaskStagePopup p {
  margin-bottom: 0;
  font-size: 0.75rem;
  color: var(--cs-background);
}

.deleteTaskStagePopup {
  position: absolute;
  z-index: 9;
  background: var(--cs-dark-01);
  padding: 8px;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--radius-5);
  cursor: auto;
  display: none;
}
.deleteTaskStagePopup .btnStyle1 {
  font-size: 0.75rem;
  background-color: var(--cs-secondary-a);
  height: 24px;
  border-radius: var(--radius-5);
}
.deleteTaskStagePopup .noStyle {
  color: var(--cs-background);
  font-size: 0.75rem;
  height: 24px;
  padding: 0;
  margin-right: 10px;
}
.deleteTaskStagePopup .buttonSec {
  justify-content: flex-end;
  margin: 5px 0;
}

.deleteTaskStagePopup.showPopup {
  display: block;
}
.deleteStageOnlyPopup {
  height: max-content;
  width: 80px;
}
.deleteStageOnlyPopup .buttonSec {
  flex-direction: column-reverse;
  align-items: flex-end;
  margin: 3px 0 0 0;
}
.deleteTaskOnlyPopup {
  height: 80px;
}
.secondPanel .defaultItemList li.active-project::after {
  left: -10px;
}
.expander.collapsedExp ~ .secondPanel li.active-project .sidePanelIcon {
  background-color: var(--cs-secondary-light);
  border-radius: var(--radius-3);
  height: 30px;
  width: 30px;
}

.blockStatusImageWrap {
  height: 40px;
  width: 40px;
  margin: auto;
}

.blockStatusImageWrap img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.assigneeListWithoutTable .assigneeList {
  left: 0;
  top: 30px;
}
.taskRelatedData .priorityInfo span:first-child.cmnIcon {
  margin-right: 4px;
  cursor: pointer;
}

.assigneeListWithoutTable .assigneeList li {
  position: relative;
}
.assigneeListWithoutTable .assigneeList li span.unassign {
  background-size: 9px;
  flex: 0 0 30px;
}

.assignWrap.assigneeListWithoutTable .assigneeList li .userBlkWrap {
  padding: 8px 0;
}
.assigneeListWithoutTable li:first-child .unassignWrap span.unassign {
  position: absolute;
  background-size: 9px;
}

/* .assigneeListWithoutTable li:first-child {
  margin-bottom: 20px;
} */
.taskCardViewItem .taskName {
  width: 100%;
}
.taskCardViewItem .taskName input {
  overflow: visible;
  text-overflow: inherit;
  margin-bottom: 0;
  padding-left: 0;
}

/*Message Box*/
.messageBox .userBlkWrap {
  align-items: baseline;
}
.tasktable tr.not-empty .messageBox .userBlkWrap .userName {
  font-weight: 600;
}
.tasktable tr.not-empty .messageBox .userBlkWrap {
  width: auto;
  padding: 16px;
}
.messageBox .msgDueDate {
  color: var(--msg-due-date);
  font-weight: 500;
  font-size: 0.688rem;
  margin-left: 2px;
}
.messageBox .mentionedPerson {
  color: var(--cs-secondary-a);
}
.messageBox {
  width: 335px;
  box-shadow: 0px 8px 16px 0px rgba(90, 91, 106, 0.16),
    0px 4px 8px 0px rgba(58, 58, 68, 0.16);
  border-radius: var(--radius-5);
  background-color: var(--cs-background);
  top: 40px;
  right: 0;
  z-index: 9;
  position: absolute;
  display: none;
}
.messageBox .msgBoxTop {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cs-light-01);
}
.tasktable .messageBox .msgHeading input[type="text"] {
  font-weight: 700;
  margin-bottom: 0;
  padding-top: 0;
  padding-left: 0;
}
.masseuse .userAvtr {
  position: relative;
}
.recentMsg.masseuse .userAvtr:after {
  right: 0;
}
.messageBox .msgBody > div:not(:first-child).masseuse {
  padding-top: 0;
}
.messageBox .msgBody .masseuse {
  position: relative;
}
.tasktable tr.not-empty .messageBox .msgTextMore {
  top: 0;
  position: absolute;
  right: 16px;
  cursor: pointer;
}
.replyMsg textarea {
  overflow: hidden;
  padding: 11px 16px;
  height: auto;
  display: block;
  border-radius: 3px 3px 0 0;
  background-color: var(--cs-progressCardBorder);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--cs-light-01);
}
.replyMsg {
  padding: 0 16px 16px 16px;
}
.messageBox .emojiMsg {
  justify-content: space-between;
  padding: 7px 16px;
  background-color: var(--cs-progressCardBorder);
  border-radius: 0 0 3px 3px;
}
.messageBox .emojiMsg span {
  cursor: pointer;
}
.messageBox.show {
  display: block;
}
.messageWrap span.message {
  cursor: pointer;
}

/*Simple task list (table view & card view)*/
.tasktable table tr td:first-child {
  padding: 0 16px;
}
.tasktable table tr td:first-child .tdInner img {
  max-width: 50px;
  height: 35px;
  vertical-align: middle;
}
.taskCardViewItem .taskNameWrap .statusIcon img {
  width: auto;
  max-width: 50px;
}

/*Customize Status Update*/
.customDefaultTaskName > * {
  font-weight: 400;
}

.customDoubleStrikeTaskName > * {
  text-decoration-style: double;
  font-weight: 400;
}

.customSingleStrikeTaskName > * {
  text-decoration: line-through;
  font-weight: 400;
}

.customGreenHighlightedTaskName > * {
  background: var(--cs-status-done);
  padding: 5px;
  font-weight: 400;
}

.taskCardViewItem:hover .taskNameWrap .taskName ~ span.actionIons {
  opacity: 1;
}
.defaultUserLogo.uploadLogoLeft .userBlkWrap .userAvtr {
  background: transparent;
}

.customizedTabNavigation
  .ant-steps
  .ant-steps-item-process
  .ant-steps-item-icon
  > .ant-steps-icon
  .ant-steps-icon-dot,
.customizedTabNavigation
  .ant-steps
  .ant-steps-item-finish
  > .ant-steps-item-container
  > .ant-steps-item-tail::after,
.customizedTabNavigation
  .ant-steps
  .ant-steps-item-finish
  .ant-steps-item-icon
  > .ant-steps-icon
  .ant-steps-icon-dot {
  background: var(--cs-secondary-a);
}
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(
    .ant-pagination-size-changer
  ):hover
  .ant-select-selector,
.ant-select-focused.ant-select:not(.ant-select-disabled):not(
    .ant-select-customize-input
  ):not(.ant-pagination-size-changer)
  .ant-select-selector,
.editableFields .fldWrap input:hover {
  border-color: var(--cs-primary-a);
}

/*Profile Settings page fixing*/
.profileCustomNavTab .editableFields .radioboxHolder {
  display: flex;
  max-width: 350px;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}
.subTabNavigation.tabcontent {
  max-width: 100%;
}
.subTabNavigation .tab-main-box {
  max-width: 710px;
}
.loginBlk.leftSec {
  max-width: 100%;
  margin-left: 0;
}
.loginBlk.leftSec .fldWrap .userPassword {
  padding: 11px 50px;
}
.loginBlk.leftSec h4 {
  margin-bottom: 16px;
}
.loginBlk.leftSec .fldWrap .material-icons-outlined {
  top: 12px;
}
.loginBlk.leftSec .fldWrap {
  width: 100%;
}

.profileSettingsPage-content .modal-header h2 {
  padding-left: 5px;
}
.uploadLogoLeft .userBlkWrap .userAvtr img {
  border: 1px solid var(--cs-primary-a);
}

.taskCardViewItem .assignWrap .assigneeList .userBlkWrap .userName {
  text-overflow: initial;
  overflow: inherit;
}

/* li.parentli.independent-project.active-project {
  padding-top: 12px;
} */
li.parentli.independent-project.active-project::after {
  top: 12px;
}

.currentDateWrap {
  background: var(--cs-top-left-corner) no-repeat center;
  height: 48px;
  width: 48px;
  margin: 20px auto 0 auto;
}
.currentDateWrapHolder {
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  margin-left: 11px;
  margin-right: 11px;
}

.styleCurrentMonth {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--cs-background);
  text-transform: uppercase;
  line-height: 2;
}
.styleCurrentDate {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cs-background);
  text-transform: uppercase;
  line-height: 1;
}
.underDev {
  opacity: 0.5;
}

/***Feedback(MVP)***/
.actionBtnSec > li:first-child,
.actionBtnSec > li:first-child button {
  border-radius: var(--radius-5) 0 0 var(--radius-5);
}

.actionBtnSec > li:last-child,
.actionBtnSec > li:last-child button {
  border-radius: 0 var(--radius-5) var(--radius-5) 0;
}
.assigneeListWithoutTable li .unassignItem {
  cursor: pointer;
}
.clearPriorityMenu li:last-child {
  border-radius: var(--radius-3) var(--radius-3) 0 0;
}
.clearPriorityMenu li:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.customDoubleStrikeTaskName span {
  background: var(--cs-double-stroke) repeat-x center/auto;
}

.tasktable .assigneeList li {
  padding-left: 16px;
  padding-right: 16px;
}

.userPart {
  display: flex;
  align-items: center;
}
.tasktable td .assigneeList li:first-child:after {
  display: none;
}
.assigneeList {
  padding: 0;
}
.assigneeListWithoutTable .userBlkWrap span.unassign,
td.assignWrap .unassignUserBlkWrap span.unassign {
  margin-right: 8px;
}

/*Add Project Button*/
.projectItemList .sectionHeading span.addplus {
  display: inline-block;
  cursor: pointer;
}

.projectItemList .sectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addFolderInputBoxClass {
  width: calc(100% - 30px);
  margin-left: auto;
  padding: 0px 7px 0 0;
  border-radius: 0;
  justify-content: center;
  border-bottom: 1px solid var(--cs-light-01);
  border-top: none;
  border-left: none;
  border-right: none;
}
.accountSetupPageBlk h1 {
  display: none;
}
.showTaskPanel .taskCardViewItem .taskNameWrap .taskName {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0;
  position: relative;
  cursor: pointer;
}
.showTaskPanel .dueTaskItem .taskCardViewItem .taskNameWrap .statusIcon {
  flex: 0 0 23px;
}
.memberInviteTable.tab1Table tr td:nth-child(1) {
  width: 310px;
}

.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 16px;
  z-index: 100;
}

.spinner > div {
  width: 10px;
  height: 10px;
  margin: -12px 4px 0;
  background-color: #ef4c5d;
  border-radius: 100%;
  display: inline-block;
  animation: bouncedelay 1s ease-in-out infinite;
}

@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: translateY(24px) scale(1);
    opacity: 0.6;
    filter: grayscale();
  }

  50% {
    transform: scale(1.4);
    opacity: 1;
    filter: none;
  }
}

.spinner .bounce1 {
  animation-delay: -0.8s;
}

.spinner .bounce2 {
  animation-delay: -0.7s;
}

.spinner .bounce3 {
  animation-delay: -0.6s;
}

.spinner .bounce4 {
  animation-delay: -0.5s;
}

.privacy-terms-header {
  padding: 24px 16px;
  max-width: 1180px;
  margin: auto;
}
.inviteMember button {
  height: 48px;
}
.privacy-terms-page .container {
  max-width: 1180px;
  margin: 40px auto auto auto;
  padding: 10px;
}
.dateEffective {
  display: block;
  font-weight: 700;
}
.privacy-terms-page .block p {
  margin-bottom: 0;
}
.privacy-terms-page .block {
  margin-bottom: 30px;
}
.privacy-terms-page .block h3 {
  margin-bottom: 16px;
}
.supportMail {
  color: var(--cs-secondary-b);
}
.underDev.addCompany:hover {
  border-radius: 50%;
}
.privacy-terms-page .block p.subHeading {
  text-decoration: underline;
}
.privacy-terms-page .block p.subHeading:not(:first-child) {
  margin: 20px 0;
}
.privacy-terms-page .block strong.userName {
  margin-top: 16px;
  display: inline-block;
}
.memberInviteTable table span.cmnIcon.deleteBin {
  opacity: 0;
}

.memberInviteTable table tr:hover span.cmnIcon.deleteBin {
  opacity: 1;
}
.createCard .text {
  text-align: center;
}
.buttonLoader.btnStyle1 .spinner {
  height: 44px;
}

.addCompany.underDev .addCompanyIcon {
  background: var(--cs-add-company-under-dev) no-repeat center center / 20px;
}
.parentli .itemNameBlk.haveSubItem span.itemName {
  border-bottom: 1px solid transparent;
}
.taskItemLast .addItem.item1 {
  text-align: left;
}
.associatedUserWrapper
  .ant-select-single:not(.ant-select-customize-input)
  .ant-select-selector {
  padding: 9px 11px;
}
.deleteProjectModal .createCard .icon {
  background: var(--cs-delete-universal) no-repeat center/auto;
  width: 210px;
}
.workspacePriority .userBlkWrap {
  padding: 0;
  border-top: 0;
  margin-top: 0;
}
.workspacePriority,
.taskStatusName {
  display: flex;
  align-items: center;
}
.showTaskPanel .taskCardViewItem .taskNameWrap {
  justify-content: space-between;
}
.workspacePriority .userBlkWrap .userAvtr {
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
  font-size: 0.5rem;
}

.showTaskPanel .taskName ~ .customTooltip {
  width: 190px;
  position: absolute;
  max-width: 180px;
  top: 40px;
  left: 30px;
  font-size: 0.75rem;
  background: var(--cs-tooltip-bg) no-repeat center/ contain;
  z-index: 1;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  display: none;
  padding-bottom: 15px;
}
.showTaskPanel .taskName ~ .customTooltip > * {
  z-index: 2;
  color: var(--cs-background);
}
.showTaskPanel .taskName:hover ~ .customTooltip {
  display: block;
}
.createWorkspaceForm .radioHolder label {
  font-weight: 400;
}
.createWorkspaceForm .modal-footer {
  padding: 0 15px 0 20px;
}
.secondPanel .itemNameBlk.underDev:hover {
  color: inherit;
}
.secondPanel.collapsedSecondPanel .itemList.defaultItemList li {
  padding: 5px 0;
}

.secondPanel.collapsedSecondPanel li.parentli .haveSubItem ~ ul li {
  padding: 5px 0;
}

.secondPanel.collapsedSecondPanel
  li.parentli
  .haveSubItem
  ~ ul
  li.active-project,
.secondPanel.collapsedSecondPanel .itemList.defaultItemList li.active-project {
  background: transparent;
}
.showTaskPanel .taskCardViewItem .messageWrap span:nth-child(2) {
  margin-left: 2px;
}
.showTaskPanel .taskCardViewItem .messageWrap {
  padding-right: 5px;
}
.workspacePriority .addplus {
  cursor: pointer;
}
.section-completed .section-text-span {
  color: var(--cs-color-done);
}

/*Messaging Screens*/
.messageListPanel {
  border-right: 1px solid var(--cs-progressCardBorder);
  max-width: 370px;
  background-color: var(--cs-messagelist-bg);
}
.searchFilterWrap .searchFld input {
  padding: 4px 30px;
  width: 230px;
  border-radius: var(--radius-3);
  background: var(--cs-search-light) var(--cs-background) no-repeat 7px center;
}
.searchFilterWrap span.notification {
  opacity: 0.65;
}
.searchFilterWrap .searchFld {
  margin-right: 8px;
  padding-left: 24px;
}
.messagingScreen .contentHeadingPanel {
  border-bottom: none;
  padding-left: 24px;
  padding-right: 24px;
  background-color: transparent;
}
.messagingScreen.inner-container {
  padding-top: 0;
  padding-left: 0;
}
.messageItem .messageText strong {
  font-weight: 600;
}
.messageItem .userBlkWrap {
  align-items: start;
  border-top: none;
  padding-left: 0;
  padding-right: 0;
}
.messageItem .messageText p {
  font-weight: normal;
}
.messageItem .userBlkWrap .userAvtr {
  position: relative;
}
.messageItem .userBlkWrap .userAvtr:after {
  top: 1px;
  right: 1px;
}
.bulkMsgCategory p:first-child {
  font-size: 0.75rem;
  color: var(--cs-resend);
  margin-bottom: 8px;
  padding-left: 24px;
}
.searchFilterWrap {
  padding-bottom: 24px;
  padding-right: 24px;
}
.messageItem .messageText span.notiNumber {
  display: inline-flex;
  font-size: 0.625rem;
  min-width: 14px;
  line-height: normal;
  margin-left: 4px;
  font-weight: 600;
}
.messageItem .messageItemTop {
  justify-content: space-between;
  margin-bottom: 4px;
}
.messageItem .timePinnedStatus .time {
  color: var(--cs-resend);
  font-size: 0.75rem;
  margin-right: 8px;
}
.messageItem .timePinnedStatus {
  position: relative;
}
.messageItem .timePinnedStatus .pinned,
.messageItem .timePinnedStatus .unpinned {
  position: absolute;
  right: -20px;
}
.messageText {
  max-width: 280px;
  padding-right: 20px;
}
.messageItem {
  padding-left: 24px;
  border-bottom: 1px solid var(--cs-light-01);
  cursor: pointer;
}
.messageItem.activeItem,
.messageItem:hover {
  background-color: var(--cs-hoverShade-1);
}
.bulkMsgCategory:not(:first-child) {
  margin-top: 24px;
}
.messagingScreen {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.messageListWrap {
  overflow: auto;
  max-height: 100vh;
  padding-bottom: 120px;
}
.dateShown p {
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
}
.chatBoxUI {
  width: calc(100% - 624px);
  padding: 32px 0;
}
.generalMasseuse {
  height: 40px;
  width: 40px;
  background: var(--cs-dark-01);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-50);
  flex: 0 0 40px;
  color: var(--cs-background);
  font-weight: 600;
}
.senderMessageText {
  background-color: var(--cs-dark-01);
  color: var(--cs-background);
  margin-right: 16px;
}
.generalMessagePlate {
  max-width: 295px;
  border-radius: 6px;
  padding: 8px;
  position: relative;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.generalMessageWrap {
  align-items: end;
  margin-top: 16px;
}
.senderMessage {
  justify-content: end;
}
.senderMessageText::after {
  content: "";
  background: url(../images/message-box-arrow.svg) no-repeat center/contain;
  position: absolute;
  bottom: 10px;
  right: -10px;
  width: 15px;
  height: 22px;
  z-index: -1;
}
.receiverMessageText::after {
  content: "";
  background: url(../images/receiver-message-arrow.svg) no-repeat center/contain;
  position: absolute;
  bottom: 10px;
  left: -13px;
  width: 15px;
  height: 22px;
  z-index: -1;
}
.receiverMessageText {
  margin-left: 16px;
  background-color: var(--cs-background);
}
.sendingTime {
  text-align: right;
}
.sendingTime span {
  font-weight: 600;
  font-size: 0.75rem;
}
.generalMessagePlate p {
  margin-bottom: 5px;
}
.chatBoxUI .dateShown {
  margin-bottom: 10px;
}
.receiverMessageText .sendingTime span {
  color: var(--cs-resend);
}
.messageUIPanel {
  overflow-y: scroll;
  height: calc(100% - 150px);
  padding: 0 24px 50px 24px;
}
.messageUIPanel::-webkit-scrollbar-thumb,
.messageListWrap::-webkit-scrollbar-thumb {
  background-color: var(--msg-due-date);
}
.messageScreenEditor img {
  width: 100%;
}
.pdfFileIcon {
  background: var(--cs-pdf-file-icon) no-repeat center/22px;
  width: 22px;
  height: 30px;
}
.xlFileIcon {
  background: var(--cs-xl-file-icon) no-repeat center/22px;
  width: 22px;
  height: 30px;
}
.sampleFile .fileIcon span {
  display: inline-block;
}
.messageDetailsInfo {
  width: 330px;
  padding: 32px 0 32px 24px;
}
.taskFileHeading p {
  font-size: 0.75rem;
  color: var(--cs-resend);
  margin-bottom: 0;
}
.taskFileHeading {
  justify-content: space-between;
  margin-bottom: 8px;
  align-items: center;
  cursor: pointer;
}
.sampleFile p {
  margin-bottom: 8px;
}
.messageDetailsInfo .fileDateSize p {
  color: var(--cs-neutral);
  font-size: 0.625rem;
  margin-bottom: 0;
}
.messageDetailsInfo .fileDateSize p:first-child {
  margin-bottom: 2px;
}
.messageDetailsInfo .fileDateSize {
  padding-left: 8px;
}
.messageDetailsInfo .sampleFile {
  border: 1px solid var(--cs-light-01);
  padding: 8px;
  margin-bottom: 4px;
  cursor: pointer;
}

.messageDetailsInfo .sampleFile:hover {
  background-color: var(--cs-hoverShade-1);
}
.sampleFileWrap.hide,
.projectMemberWrap.hide {
  display: none;
}
.taskFileItem {
  margin-bottom: 32px;
}
.taskFileItem .projectName .subArrow {
  display: inline-block;
  width: 23px;
  height: 23px;
  background-size: 15px;
}
.taskFileItem .projectName {
  display: flex;
  font-size: 0.875rem;
}
.taskFileItem .projectName a {
  font-weight: 600;
  color: var(--cs-secondary-b);
  text-decoration: none;
}
.projectMember .userBlkWrap {
  margin-top: 0;
  border-top: none;
  padding-left: 0;
}

.projectMemberRole {
  min-width: 85px;
  display: flex;
  align-items: center;
  justify-content: end;
  border-radius: 3px;
}

.projectMember .userBlkWrap .userName {
  font-weight: 600;
}

.projectMember {
  justify-content: space-between;
  padding: 8px 0;
}
ul.messageFilterDropdown {
  left: 0;
  top: 40px;
}
.messageFilterDropdown .menuHeading {
  font-weight: 500;
  font-size: 0.688rem;
  color: var(--cs-neutral);
}
.messageFilterDropdown .menuHeading:hover {
  background-color: transparent;
}
.secondPanel.collapsedSecondPanel
  ~ .plannerMainContent
  .taskAssignedCalendarPanel {
  margin-left: 250px;
}

.secondPanel ~ .plannerMainContent .taskAssignedCalendarPanel {
  margin-left: 0;
}

.projectMember .userEmail {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.messageFilterDropdown .cloneSectionTaskChckBxWrp {
  display: block;
  border-bottom: 1px solid var(--cs-light-01);
}
.messageFilterDropdown .subArrowMenu2 {
  display: none;
  min-width: 366px;
  top: 257px;
}
.messageFilterDropdown .subArrowMenu2.show {
  display: block;
}
.messageFilterDropdown .subArrowMenu2 .btnSec .btnStyle1 {
  width: auto;
  height: auto;
  padding: 6px 23px;
  background-color: var(--cs-dark-01);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-3);
  margin-left: 10px;
}
.messageFilterDropdown .subArrowMenu2 .btnSec .noStyle,
.messageFilterDropdown .subArrowMenu2 .btnSec .noStyle.btnStyle1:hover {
  background-color: transparent;
}

.messageFilterDropdown .subArrowMenu2 .btnSec .btnStyle1:hover {
  border-color: transparent;
  background-color: var(--cs-primary-b);
}
.messageFilterDropdown .subArrowMenu2 .btnSec {
  padding: 16px 21px;
  justify-content: end;
}
.messageFilterDropdown .subArrowMenu2 .searchFld {
  padding: 16px 16px 0 16px;
  margin-right: 0;
}
.messageFilterDropdown .subArrowMenu2 .searchFld input {
  width: 100%;
}
.messageFilterDropdown .subArrowMenu2 .cloneSectionTaskChckBxWrp .chckbxHolder {
  padding: 12px 0;
}
.messageFilterDropdown .subArrowMenu2 .cloneSectionTaskChckBxWrp {
  padding: 16px;
}
.messageFilterDropdown
  .subArrowMenu2
  .cloneSectionTaskChckBxWrp
  .chckbxHolder
  input {
  transform: scale(1.2);
}
.launchingSoon {
  background: var(--cs-launching-soon) no-repeat center/contain;
  min-width: 740px;
  height: 830px;
}
.halfCircle {
  background: var(--cs-half-circle) no-repeat center;
  position: absolute;
  right: 0;
  width: 80px;
  height: 170px;
  bottom: 25%;
}
.mainWrapLaunchingSoon {
  position: relative;
  max-width: 1440px;
  padding: 0 20px;
  margin: auto;
}
.mainWrapLaunchingSoon,
.mainWrapLaunchingSoon .row {
  align-items: center;
  height: 100vh;
}
.launchingSoonText {
  max-width: 630px;
  margin-left: auto;
}
.launchingSoonText h2 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 32px;
}
.launchingSoonText h2 span {
  background: var(--cs-logo-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.launchingSoonText p {
  max-width: 500px;
  font-size: 1.125rem;
  margin-bottom: 32px;
}
.getAccessBtn {
  padding: 6px 23px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  background: var(--cs-logo-grad);
  color: var(--cs-background);
  border-radius: var(--radius-3);
  cursor: pointer;
}
.launchingSoonText .emailField {
  position: relative;
  border: 1px solid var(--cs-light-01);
  border-radius: var(--radius-3);width: 90%;
}

.launchingSoonText .emailField button {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}
.launchingSoonText .emailField input[type="email"] {
  width: calc(100% - 150px);
  padding: 5px 10px;
  border: 1px solid transparent;
}
.starsImg span.stars {
  display: inline-block;
  background: var(--cs-stars) no-repeat center/contain;
  width: 190px;
  height: 20px;
}
.starsImg {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
button.todayButton {
  display: flex;
  align-items: center;
  border-radius: var(--radius-3);
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--cs-light-01);
  font-size: 0.875rem;
  cursor: pointer;
}
button.todayButton span:first-child {
  margin-right: 4px;
}
.calendarCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.schedulerPanelHeader,
.schedulerPanelNxtPrv {
  display: flex;
  align-items: center;
}
.schedulerPanelViewOptions {
  margin-left: auto;
}
.calendarCardHeaderTitle {
  font-size: 1.125rem;
  font-weight: 700;
}
.miniCalendarPanel .ant-picker-calendar {
  font-size: 0.625rem;
}
.schedulerPanelHeader > *:not(:last-child) {
  margin-right: 16px;
}
.schedulerPanelHeader {
  padding-top: 16px;
}
.miniCalendarPanel .ant-picker-calendar .ant-picker-panel {
  border: none;
}
.plannerAsideBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}
.plannerMainContent .leftArrow,
.plannerMainContent .rightArrow {
  cursor: pointer;
}

.cmnIcon.sectionPrivacy.lock,
.cmnIcon.sectionPrivacy.unlock {
  cursor: unset;
}

p.earlyBird {
	font-size: 1rem;
	color: #2e364c;
	margin: 0;
	margin-top: 0.875rem;
	margin-bottom: 0;
}

/******Media Query*******/
@media screen and (max-width: 2200px) {
  .onboardingMainWrapper .setup-info-panel {
    max-width: 53vw;
  }
}

@media screen and (max-width: 1599px) {
  .onboardingMainWrapper .setup-info-panel {
    max-width: 58vw;
  }

  .loginWrapper h1 .logoDefault {
    width: 150px;
  }
  .launchingSoon {
    min-width: 630px;
  }
}

@media screen and (max-width: 1359px) {
  .onboardingMainWrapper .setup-info-panel {
    max-width: 46vw;
  }
  .launchingSoon {
    min-width: 500px;
  }
  .halfCircle {
    bottom: 10%;
  }
}

@media screen and (max-width: 1199px) {
  .halfCircle {
    bottom: 0;
  }
}

@media screen and (max-width: 992px) {
  .mainWrapLaunchingSoon .row {
    flex-direction: column;
  }
  .mainWrapLaunchingSoon .row .col-lg-6 {
    width: 100%;
  }
  .launchingSoonText {
    max-width: 100%;
    padding: 40px 0;
  }
  .starsImg,
  .halfCircle {
    display: none;
  }
  .launchingSoon {
    height: 650px;
    min-width: 100%;
  }
  .launchingSoonText h2 {
    font-size: 3rem;
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 767px) {
  .launchingSoonText h2 {
    font-size: 2.5rem;
  }
  .launchingSoonText p {
    font-size: 1rem;
  }
  
  .launchingSoon {
    background: var( --cs-launching-soon-mobile) no-repeat center/contain;
   
    height: 430px;
  }
}
@media screen and (max-width: 420px){
  .launchingSoon {
    height: 300px;
  }
}
@media screen and (max-width: 320px){
  .launchingSoonText h2 {
    font-size: 2rem;
  }
  .launchingSoonText .emailField button {
    position: absolute;
    left: 50%;right: inherit;top: inherit;
    transform: translate(-50%, 10px);
}
.launchingSoonText .emailField input[type="email"]{width: 100%;}
.getAccessBtn{padding: 6px 8px;font-size: 0.875rem;}
}