/********************* Font Family *****************/

@font-face {
    font-family: 'Platform Bold';
    src: url('../fonts/Platform-Bold-Web.woff2') format('woff2'), url('../fonts/Platform-Bold-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Platform Medium';
    src: url('../fonts/Platform-Medium-Web.woff2') format('woff2'), url('../fonts/Platform-Medium-Web.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Platform Regular';
    src: url('../fonts/Platform-Regular-Web.woff2') format('woff2'), url('../fonts/Platform-Regular-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Platform Light';
    src: url('../fonts/Platform-Light-Web.woff2') format('woff2'), url('../fonts/Platform-Light-Web.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?v=20240604pdwexe');
  src:  url('../fonts/icomoon.eot?v=20240604pdwexe#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?v=20240604pdwexe') format('truetype'),
    url('../fonts/icomoon.woff?v=20240604pdwexe') format('woff'),
    url('../fonts/icomoon.svg?v=20240604pdwexe#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/********************* Heading *****************/

h1, h4, #workplace-projectmenu-modal .workplace-main--projectname, .modal-title{
    font-family: 'Platform Bold', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    color: #000000;
}



h1 {

    font-size: 2.25rem;

}

.mr-1{
    margin-right: 10px;
}

h5 {

    font-family: 'DM Sans', sans-serif;

    font-size: 1.125rem;

    color: #000000;

}

a {
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus{
    color:inherit;
}

a.disabled{
    pointer-events: none;
    cursor: default;
    color: #e3e3e3;
}

/********************* Body *****************/

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem;
    color: #75716B;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}


.text-primary {
    color: #FFD200 !important;
}



.btn-outline-secondary {
    padding: 10px 20px;
    font-size: 1.125rem;
    color: #000000;
    font-weight: 700;
}



.btn-outline-secondary:hover{
    background-color: transparent; !important;
    color:#000;
    box-shadow: none !important;
}

.btn-outline-secondary:active:focus, .btn-outline-secondary:active, .btn-outline-secondary:focus-visible, .btn-outline-secondary:active:focus-visible{
    background-color: #75716B !important;
    color:#FFF;
    box-shadow: none !important;
}


.background-gradient.active {
    display: block;
}
.background-gradient {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    box-sizing: border-box;
    z-index: 300;
    pointer-events: initial;
}

/********************* Content *****************/
/*.modal#workplace-list-filter-modal, .modal#workplace-modal, .modal#workplace-feed-filter-modal, .modal#workplace-projectmenu-modal {
    right: 0;
    max-width: 640px;
    margin: 0 auto;

}*/

.copy-modal {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 8px;
    display: none;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.copy-modal-content {
    padding: 10px 20px;
    border-radius: 6px;
}

.copy-modal p{
    margin-bottom:0;
}

.svg--grey-strokes *{
    stroke:rgb(117, 113, 107);
}


[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.feed-listing>li.system--item {
    border: 0.5px solid #EE4056;
    background-color: #FFEFF1;
}

.reply-chat-timeline>li.system--item{
    background: #E7F7FF;
    border: 1px solid #32B1E6;
    border-radius: 12px;
    margin-bottom: 16px;
}

.reply-chat-timeline>li.flag--item{
    background: #FFF4F4;
    border: 1px solid #EE4056;
    border-radius: 12px;
}

.flag--item .task-remark-panel {
    color: #EE4056;
}
.flag--item .updates-done--panel, .flag--item .task-remark-panel {
    margin-bottom: 0;
}
.task-remark-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
    margin-bottom: 16px;
}

.task-remark-panel .task-remark-label {
    font-weight: 700;
}

.task-remark-panel .task-remark-update {
    font-weight: 400;
}


.social-media--item.document .icon-wrapper{
    margin-right: 8px;
    color: #B07B2A;
}



.feed-listing .timeline-user--designation {
    font-size: 0.95rem;
    color:#75716B;
}

.feed-listing .own-bubble .timeline-user--designation{
    color:#000000;
}

/*overwriting default bootstrap css*/
.btn-primary{
    background: #FFD200;
}

.lottie-gallery--item-content svg{
    max-width:300px;
}

.lottie-gallery--item-content canvas{
    max-width:500px;
    min-height:200px;
    max-height:500px;
}



/*.modal-fullscreen .modal-body.timelineStructure {
    overflow-y: hidden !important;
}*/



.more-file-panel {
    color: #B07B2A;
    padding-top: 10px;
    padding-bottom: 10px;
}

.highlightsearch {
    color: #EFAC00;
    font-weight: bold;
}

#workplace-feed-filter-modal .feeds-category-filter--form {
    padding-right: 24px;
    padding-left: 24px;
}

#workplace-list-filter-modal .search-filtering-wrapper.isChecked .search-filtering-detail .label-text{
    font-weight:bold;
    color:#000;
}


.workplace-date span{
    display:inline-block;
    padding:4px 8px;
    border:1px solid #E5E5E1;
    border-radius:15px;
    font-size:12px;
    /* line-height:16px;
    color:#75716B;
    font-family: 'DM Sans', sans-serif;
    font-weight:400; Redundant CSS - Nisha */
}

#workplace-projectmenu-modal .project-status--pill{
    display:inline-block;
    padding: 4px 25px;
    border-radius:25px;
    width: 100%;
    text-align: center;
    color:#75716B;
}

#workplace-projectmenu-modal .project-status--pill svg{
    width:24px;
    height:24px;
    padding-right:5px;
}

.project-status--pill.planning-pill{
    stroke:#c0bfbb;
    border:1px solid #C0BFBB;
}

.project-status--pill.running-pill{
    background:#FFF0A8;
    border:1px solid #FFF0A8;
    color:#000;
}

.project-info--owner-name svg{
    width:20px;
    height:20px;
    padding-right:5px;
}

.project-info--owner-name svg,
.project-info--owner-name small{
    display:inline-block;
    vertical-align: middle;
}

.project-info .project-stage{
    font-size:14px;
}

#workplace-projectmenu-modal .project-status--pill.tba-pill{
    background:#E5E5E1;
    border:1px solid #E5E5E1;
}

#workplace-projectmenu-modal .workplace-main--projectname {
    font-size: calc(1.275rem + .3vw);
    letter-spacing: 0;
}

#workplace-projectmenu-modal ul.more_details {
    list-style: none;
    margin-left: 0;
}

#workplace-projectmenu-modal .more_details .projectmenu-item {
    text-decoration: none;
    font-weight: bold;
    color: #000000;
    width: 100%;
    padding-bottom: 24px;
    padding-top: 24px;
}

#workplace-projectmenu-modal .more_details li {
    margin: 10px 0 0 0;
    border-bottom: 1px solid #C0BFBB;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

#workplace-projectmenu-modal .workplace-projectmenu--projectname, #workplace-feed-filter-modal .workplace-projectmenu--projectname, #workplace-projectdetails-modal .workplace-projectmenu--projectname {
    font-family: 'Platform Bold', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: calc(1.275rem + .3vw);
}

#workplace-projectdetails-modal .tab--section .nav-pills a {
    text-decoration: none;
    color: inherit;
    padding-top: 15px;
    padding-bottom: 15px;
}

#workplace-projectdetails-modal .tab--section .nav-pills a.active {
    color: #000000;
    font-weight: bold;
    border-bottom: 2px solid #EFAC00;
}

#workplace-projectdetails-modal .tab--section .nav-pills {
    margin-bottom: 15px;
}

.icon-Project-Details_Team:before{
    content: "\e98a";
}
.icon-Basics_Reports_Selected:before {
    content: "\e988";
}
.icon-Basics_Reports:before {
    content: "\e989";
}
.icon-Moggy-Head:before {
    content: "\e985";
}
.icon-Moggy-Head_Reverse .path1:before {
    content: "\e986";
    color: rgb(255, 255, 255);
}
.icon-Moggy-Head_Reverse .path2:before {
    content: "\e987";
    margin-left: -1em;
    color: rgb(0, 0, 0);
}
.icon-Cross:before {
    content: "\e900";
}
.icon-Missing-Team:before {
    content: "\e901";
}
.icon-Action_Add:before {
    content: "\e902";
}
.icon-Action_Attach:before {
    content: "\e903";
}
.icon-Action_Camera:before {
    content: "\e904";
}
.icon-Action_Camera_flash-off:before {
    content: "\e905";
}
.icon-Action_Camera_flash-on:before {
    content: "\e906";
}
.icon-Action_Close:before,.icon-Close:before {
    content: "\e907";
}
.icon-Action_Copy:before {
    content: "\e908";
}
.icon-Action_Download:before {
    content: "\e909";
}
.icon-Action_Drag:before {
    content: "\e90a";
}
.icon-Action_Edit:before {
    content: "\e90b";
}
.icon-Action_Flag:before {
    content: "\e90c";
}
.icon-Action_Flag_Selected:before {
    content: "\e90d";
}
.icon-Action_Forward:before {
    content: "\e90e";
}
.icon-Action_IMG-Collapse:before {
    content: "\e90f";
}
.icon-Action_IMG-Expand:before {
    content: "\e910";
}
.icon-Action_Link-Out:before {
    content: "\e911";
}
.icon-Action_Play:before {
    content: "\e912";
}
.icon-Action_Post:before {
    content: "\e913";
}
.icon-Action_Reply:before {
    content: "\e914";
}
.icon-Action_Resend:before {
    content: "\e915";
}
.icon-Action_Share:before {
    content: "\e916";
}
.icon-Action_Trash:before {
    content: "\e917";
}
.icon-Action_Undo:before {
    content: "\e918";
}
.icon-Arrow_Back:before {
    content: "\e919";
}
.icon-Arrow_Dropdown:before {
    content: "\e91a";
}
.icon-Arrow_Enter:before {
    content: "\e91b";
}
.icon-Arrow_Scroll:before {
    content: "\e91c";
}
.icon-Basics_Alert:before,.icon-Alert:before {
    content: "\e91d";
}
.icon-Basics_Alert_Mute:before {
    content: "\e91e";
}
.icon-Basics_Alert_selected:before {
    content: "\e91f";
}
.icon-Basics_Archived:before {
    content: "\e920";
}
.icon-Basics_Contact_Mail:before {
    content: "\e921";
}
.icon-Basics_Contact_Phone:before,.icon-Contact_Phone:before {
    content: "\e922";
}
.icon-Basics_Dashboard:before {
    content: "\e923";
}
.icon-Basics_Dashboard_selected:before {
    content: "\e924";
}
.icon-Basics_Enquiry:before {
    content: "\e925";
}
.icon-Basics_Filter:before {
    content: "\e926";
}
.icon-uniE927:before {
    content: "\e927";
}
.icon-uniE928:before {
    content: "\e928";
}
.icon-Basics_Info:before,.icon-Info:before {
    content: "\e929";
}
.icon-Basics_KeyLog:before,.icon-Key:before {
    content: "\e92a";
}
.icon-Basics_KeyLog_Selected:before {
    content: "\e92b";
}
.icon-Basics_Log-Out:before,.icon-Log-Out:before {
    content: "\e92c";
}
.icon-Basics_More:before,.icon-More:before {
    content: "\e92d";
}
.icon-uniE92E:before {
    content: "\e92e";
}
.icon-uniE92F:before {
    content: "\e92f";
}
.icon-uniE930:before {
    content: "\e930";
}
.icon-uniE931:before {
    content: "\e931";
}
.icon-uniE932:before {
    content: "\e932";
}
.icon-uniE933:before {
    content: "\e933";
}
.icon-uniE934:before {
    content: "\e934";
}
.icon-uniE935:before {
    content: "\e935";
}
.icon-Basics_Order:before {
    content: "\e936";
}
.icon-uniE937:before {
    content: "\e937";
}
.icon-uniE938:before {
    content: "\e938";
}
.icon-Basics_Order_selected:before {
    content: "\e939";
}
.icon-uniE93A:before {
    content: "\e93a";
}
.icon-uniE93B:before {
    content: "\e93b";
}
.icon-Basics_Password:before,.icon-Password:before {
    content: "\e93c";
}
.icon-Basics_Profile:before,.icon-Profile:before {
    content: "\e93d";
}
.icon-Basics_Profile_selected:before,.icon-Profile_selected:before {
    content: "\e93e";
}
.icon-Basics_Search:before,.icon-Search:before {
    content: "\e93f";
}
.icon-Basics_Settings:before {
    content: "\e940";
}
.icon-Basics_Settings_selected:before {
    content: "\e941";
}
.icon-Basics_Task:before,.icon-Task:before {
    content: "\e942";
}
.icon-Basics_Task_selected:before,.icon-Task_selected:before {
    content: "\e943";
}
.icon-Basics_Workplace:before {
    content: "\e944";
}
.icon-Basics_Workplace_selected:before {
    content: "\e945";
}
.icon-Basics_Zoom-in:before {
    content: "\e946";
}
.icon-Basics_Zoom-out:before {
    content: "\e947";
}
.icon-Business_Corporate:before {
    content: "\e948";
}
.icon-Business_CozyHomes:before {
    content: "\e949";
}
.icon-Business_Easyhome:before {
    content: "\e94a";
}
.icon-Business_Retail:before {
    content: "\e94b";
}
.icon-Category_Complete:before {
    content: "\e94c";
}
.icon-Category_Defects-or-Complains:before,.icon-MSG-Error:before {
    content: "\e94d";
}
.icon-Category_Design-or-Planning:before {
    content: "\e94e";
}
.icon-Category_Finale:before {
    content: "\e94f";
}
.icon-Category_General:before {
    content: "\e950";
}
.icon-Category_Notes:before {
    content: "\e951";
}
.icon-Category_Order-or-Delivery:before {
    content: "\e952";
}
.icon-Category_Settings:before {
    content: "\e953";
}
.icon-Category_Site-Work:before {
    content: "\e954";
}
.icon-Detail_Area:before {
    content: "\e955";
}
.icon-Detail_Bathroom:before {
    content: "\e956";
}
.icon-Detail_Career:before {
    content: "\e957";
}
.icon-Detail_Doc:before {
    content: "\e958";
}
.icon-Detail_Empty-House:before {
    content: "\e959";
}
.icon-Detail_House:before {
    content: "\e95a";
}
.icon-Detail_Market-Segment:before {
    content: "\e95b";
}
.icon-Detail_Progress:before {
    content: "\e95c";
}
.icon-Detail_Projects:before {
    content: "\e95d";
}
.icon-Detail_Projects_selected:before {
    content: "\e95e";
}
.icon-Detail_Rooms:before {
    content: "\e95f";
}
.icon-Detail_Schedule:before {
    content: "\e960";
}
.icon-Detail_Schedule_selected:before {
    content: "\e961";
}
.icon-Detail_Size:before {
    content: "\e962";
}
.icon-Detail_Theme:before {
    content: "\e963";
}
.icon-In-Progress:before {
    content: "\e964";
}
.icon-Others_Accessibility:before {
    content: "\e965";
}
.icon-Others_CE-Doc:before {
    content: "\e966";
}
.icon-Others_Chat-status_Attention_solid:before {
    content: "\e967";
}
.icon-Others_Chat-status_Attenton:before {
    content: "\e968";
}
.icon-Others_Chat-status_Read:before {
    content: "\e969";
}
.icon-Others_Chat-status_Read_solid:before {
    content: "\e96a";
}
.icon-Others_Chat-status_Unread:before {
    content: "\e96b";
}
.icon-Others_Chat-status_Unread_solid:before {
    content: "\e96c";
}
.icon-Others_Clock:before {
    content: "\e96d";
}
.icon-Others_Cost:before {
    content: "\e96e";
}
.icon-Others_Cost_Selected:before {
    content: "\e96f";
}
.icon-Others_Device:before {
    content: "\e970";
}
.icon-Others_Error:before {
    content: "\e971";
}
.icon-Others_Featured:before {
    content: "\e972";
}
.icon-Others_Hide:before {
    content: "\e973";
}
.icon-Others_History:before {
    content: "\e974";
}
.icon-Others_Hooga:before {
    content: "\e975";
}
.icon-Others_Key:before {
    content: "\e976";
}
.icon-Others_Key-Tray:before,.icon-Key-Tray {
    content: "\e977";
}
.icon-Others_Keys:before,.icon-My-Keys:before {
    content: "\e978";
}
.icon-Others_Lifestyle:before {
    content: "\e979";
}
.icon-Others_Property-Review:before {
    content: "\e97a";
}
.icon-Others_Service-summary:before {
    content: "\e97b";
}
.icon-Others_Services:before {
    content: "\e97c";
}
.icon-Others_Show:before {
    content: "\e97d";
}
.icon-Others_Success:before {
    content: "\e97e";
}
.icon-Others_Tag:before {
    content: "\e97f";
}
.icon-Others_Tick:before,.icon-Tick:before {
    content: "\e980";
}
.icon-Others_Virtual-Tour:before {
    content: "\e981";
}
.icon-Others_Whatsapp:before,.icon-Whatsapp:before {
    content: "\e982";
}
.icon-PO_Pending:before {
    content: "\e983";
}
.icon-PO_Rejected:before {
    content: "\e984";
}


.icon-Basics_New-Workplace .path1:before {
    content: "\e933";
    color: rgb(0, 0, 0);
}
.icon-Basics_New-Workplace .path2:before {
    content: "\e931";
/*  margin-left: -1em;*/
    margin-left: -20px;
    color: rgb(238, 64, 86);
}


/* START */

.new-branding-red-color,.red-txt {
    color: #EE4056 !important;
}

.new-branding-dark-yellow-color {
    color: #EFAC00 !important;
}
.org-txt{
    color: #F16321 !important    
}


.new-branding-black-color {
    color: #000000;
}

html,body{
    margin:0 auto;
    position:relative;
    height: 100%;
    overflow: hidden;
}

.inline-show {
    display: inline;
}

.generic-lottie-library--container.hide-lottie-debug{
    opacity:0;
    pointer-events:none;
    position:absolute;
    top:0;
    left:0;
}

.lottie-debug-mode.hide-lottie-debug{
    display:none;
}

.lottie-debug-mode select{
    width:100%;
    margin-bottom:20px;
    display:inline-block;
}

.lottie-debug-mode a{
    display:inline-block;
    width:auto;
    padding:5px 20px;
    background:#000;
    color:#FFF;
    border-radius:15px;
    text-decoration:none;
}

.black-to-white-icon{
    filter:invert(1);
}

/* .main-page--title{ // Redundant CSS - Nisha
    max-width:80%;
    font-family: 'Platform Bold';
    font-size:35px;
    letter-spacing: 0.03em;
} */

.main-page--title{
    display: inline-block;
}

/* .page-title--container{ // Replace with bootstrap css - Nisha
    padding-top:20px;
    padding-bottom:20px;
} */

.environment-settings--banner{
    position: fixed; 
    top: 0;
    right:0;
    min-height: 30px;
    width:100%;
    max-width:250px;
    z-index: 999; 
    background: rgba(0,128,0,1);
    font-weight: 700;
    opacity: 0.75;
    padding: 0 10px;
    color: #fff;
    font-size:16px;
    transition: all 0.1s ease;
    text-transform: uppercase;
}

.environment-settings--banner.active{
    height:200px;
}

.environment-settings--banner:not(.active) .env-expand--btn span,.environment-settings--banner.active .env-expand--btn span{
    display: none;
}

.environment-settings--banner:not(.active) .env-expand--btn span:first-child,.environment-settings--banner.active .env-expand--btn span:last-child{
    display: inline;
}

.env-settings-banner--body{
    display: none;
}

.environment-settings--banner.active .env-settings-banner--body{

    display: block;
}

.environment-settings--banner .env-close--btn{
    position: absolute;
    right: 10px;
}

.environment-settings--banner a{
    color:#000;
}
.full-height{
    height: 100%;
}
.fixed-container,#base{
    max-width:640px;
    margin:0 auto;
    position:relative;
    padding-bottom:83px; // Just to make IOS Mobile works
}

.search-icon{
    content: url("../images/search-icon.svg");
    height: 100%;
    width: 100%;
}

.search-property-item--search-panel{
    position: relative;
    display: flex;
    padding: 16px 40px 0px;
    margin-bottom: 8px;
}

.search-property-item--search-panel input[type=search]:focus,
.search-property-item--search-panel input[type=search] {
    width: 100%;
    border: 1px solid #dddddd;
    padding-right: 40px;
    outline: none;
    border: none;

    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #75716B;
}

.search-property-item--search-panel .search-filter-container{
    position: relative;
}

.search-property-item--search-panel .search-filter-container,
.search-property-item--search-panel .search-input-wrapper{
    display: flex;
    align-items: center;
}

.search-property-item--search-panel .search-input-wrapper{
    padding-bottom: 8px;
}

.search-property-item--search-panel .search-input-wrapper{
    flex: 1;
    border-bottom: 1.5px solid #000000;
}

.search-property-item--search-panel .search-input-wrapper .search-icon-wrapper{
    height: 20px;
    width: 20px;
    margin: 0px 16px;
}

.search-property-item--search-panel .search-input-wrapper .search-input{
    width: 100%;
}

.search-filter-container .search-filter-wrapper .filter-black-icon-wrapper{
    height: 20px;
    width: 20px;
    margin-left: 16px;
}

.search-filter-container .search-filtering-panel{
    position: absolute;
    bottom: -28rem;
    right: 0;

    display: none;
    flex-direction: column;
    align-items: center;
    padding: 16px;

    background: #F5F5F5;
    box-shadow: 0px 7px 27px rgba(75, 54, 0, 0.05), 0px 2.92443px 11.28px rgba(75, 54, 0, 0.0359427), 0px 1.56354px 6.0308px rgba(75, 54, 0, 0.0298054), 0px 0.876509px 3.38082px rgba(48, 34, 0, 0.025), 0px 0.465507px 1.79553px rgba(75, 54, 0, 0.0201946), 0px 0.193708px 0.747159px rgba(75, 54, 0, 0.0140573);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    height: 28rem;
    width: 22rem;
    z-index: 500;
}

.search-filter-container .search-filtering-panel.active{
    display: flex;
}

.search-filter-container .search-filtering-panel .search-filtering-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
}

#workplace-list-filter-modal .search-filtering-reset,
/*#workplace-feed-filter-modal .feed-filtering-reset,*/
.search-filter-container .search-filtering-panel .search-filtering-reset,
.workplace-search-filtering-reset{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #000000;
    box-sizing: border-box;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    cursor: pointer;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.workplace-search-filtering-reset{
    margin-right: 100px;
    margin-left: 100px;
}

/* #workplace-feed-filter-modal .feed-filtering-reset{ // Disable this to follow figma - Nisha
    width: 50%;
    transform: translate(50%,-50%);
} */

.search-filtering-wrapper .search-filtering-detail{
    display: flex;
    align-items: center;
}

/*.search-filtering-wrapper .search-filtering-detail i{ // Redundant CSS - Nisha
    margin-right: 8px;
}*/

.search-filtering-wrapper .search-filtering-detail .label-text{
    /* font-family: 'DM Sans', sans-serif; */
    /* font-style: normal;
    font-weight: 400; */
    /* font-size: 14px; */
    /* line-height: 18px;
    color: #000000; */
}

/* Login Page */
.login-page {
    padding-top: 80px;
     /* background-color: black; // Unused CSS - Nisha
    color: white;
    font-family: sans-serif;*/
}
/*.login-page h1,.login-page h5{ // remove this by Nisha and use bootstrap class text-white instead.
    color: #fff;
}*/

.login--form{
    margin-top: 40px;
}

.login--form .input-icon i{
    display: none;
}

.login--form .input-icon i:first-child{
    display: inline-block;
}

.login--form .input-icon.checked i:first-child{
    display: none;
}
.login--form .input-icon.checked i{
    display: inline-block;
}
.login-server-error--panel{
    min-height: 15px;
}
b, strong{
    font-weight: 600;
}
.form-control {
    background-color: transparent;
    padding: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
}

select,.form-select{
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
}

.form-control:focus {
    background-color: transparent;
    /*border: none;
    border-bottom: 2px solid white;*/
    
}
.modal .form-control,.modal .form-select{
    background-color: #fff;
    border: 1px solid #C0BFBB !important;
}
.form-control::placeholder {
    color: white;
}

.modal .form-control::placeholder {
    color: #75716B;
    font-style: italic;
    font-size: 16px;
}

.landing-page .form-control:active {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid white;
    color: white !important;
}
.form-control:active {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid white;
    
}





/* Positioning the icon inside the input field */
.input-group {
    position: relative;
    padding-top: 3%;
}

.input-group .form-control {
    padding-right: 40px; /* Add space for the icon */
}

.input-icon {
    position: absolute;
    right: 10px; /* Spacing from the input's right edge */
    top: 50%; /* Vertically align the icon */
    transform: translateY(-50%); /* Adjust to center it */
    pointer-events: none; /* Prevent interference with input interaction */
}

.input-icon i {
    color: white;
    font-size: 1em;
    transition: color 0.3s, transform 0.3s;
}

/* Profile Page */
.profile-avatar{
    border: 1px solid #C0BFBB;
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
}
.profile-name{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    font-family: 'Platform Bold', sans-serif;
}
.profile-designation{
    font-size: 17px;
    line-height: 23px;
    color: #75716B;
    margin-bottom: 0;
    font-family: 'DM Sans', sans-serif;
/*    margin-bottom: ;*/
}
.profile-menu--listing{
    margin-top: 40px;
}

.profile-menu--listing .profile-menu{
    padding: 24px 0;
    display: block;
    border-bottom: 1px solid #C0BFBB
}
.profile-menu--listing .profile-menu:last-child{

}


.profile-menu,.profile-menu:hover{
    text-decoration: none;
}
.profile-menu h5{
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
}

.profile-label{
    font-size: 17px;
    font-family: 'DM Sans', sans-serif;
    color: #75716B;
}
.profile-val{
    font-size: 19px;
    font-family: 'DM Sans', sans-serif;
    color:#000;
}
.btn-logout,.btn-logout:hover,.btn-logout:focus {
    color: black;
    padding: 17px 20px;
    border: 1px black solid;
    border-radius: 50px;
    margin-top: 64px;
    line-height: 25px;
    box-shadow: none;
}



/*support page*/
.support-intro--txt{
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
}

.support-form select,.support-form select.form-select,.support-form .form-control{
    border: 1px solid #75716B;
    color: #000000;
}

.support-form ::placeholder {
    color: #75716B !important
}

.support-form select:invalid,.support-form select option[value=""] {
  color: #75716B !important;
}



/* Notifications Page */
.notification-subpanel{
    display: none;
}

.notification-readmore--btn{
    border: 1px solid #000000;
    border-radius: 12px;
    text-decoration: none;
    font-size: 17px;
    display: inline-block;
    padding: 8px;
    color: #000;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    float: right;
    margin-top: -10px;
}
.notification-subheader{
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 600;
    height: 50px;
    padding-top: 20px;
}

.alert-module .empty-state .d-flex{
    height:calc(80vh - 80px);
}

.alert-box {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.alert-box.read{
    opacity: 0.5;
}

.alert-box .alert-content .alert-time{
    font-family: 'DM Sans', sans-serif;
    color: #999;
    font-size: 19px;
    line-height: 25px;
}

.alert-box .alert-content .alert-time small{
    color: #75716B;
}

.alert-box .alert-content {
    display: flex;
    align-items: center;
    /* Vertically centers children */
    justify-content: space-between;
    /* Keeps space between text and dot */
    margin-bottom: 5px;
}

.alert-box .alert-content .alert-dot-red {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc3545;
    flex-shrink: 0;
    /* Prevents the dot from resizing */
}

.past-notifications {
    margin-top: 20px;
}

.nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
}

.nav-bottom a {
    color: #fff;
    text-decoration: none;
}

.nav-bottom a:hover {
    text-decoration: underline;
}

.nav .nav-bottom a.active {
    font-weight: bold;
}


/* UX Notifications Page */
.inline-notification{
    display: none;
}

.inline-notification .notification-item{
    display: none;
    min-height: 200px;
}
.notification-content{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;

}






/*jon*/
.garage-application{
  
  /*overflow-x: visible;
  overflow-y: visible;*/
}

.mainapp-tab{
    display: none;
    padding-bottom: 64px;

    /*TEMP OFF*/
    transition:transform 0.3s linear;
    -webkit-transition:transform 0.3s linear;
    -moz-transition:transform 0.3s linear;
    transform:translateX(5%);
    -webkit-transform:translateX(5%);
    -moz-transform:translateX(5%);
    /*height: 100vh;*/
    height: calc(100vh - 83px); /* Just to make IOS browser works */
    overflow-x: auto;
}

.mainapp-tab.active{
    display: block;

    /*TEMP OFF*/
    transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -moz-transform:translateX(0%);
}

.mainapp--header-sticky{
    position:sticky;
    top:0;
    left:0;
    background:#fafafa;
    z-index: 5;
}

.mainapp-tab.calendar-shown .mainapp--header-sticky{
    background:#383633;
}
.calendar-shown .mainapp--header-sticky *{
    color:#FFF;
    stroke:#FFF;
}

.calendar-shown .date-filter-tasks--btn.active svg path{
    stroke:#383633;
    fill:#f8d447;
}

.workplace-listing{
    list-style: none;
    /* padding: 0; Unused CSS - Nisha */
    margin: 0;
}

.workplace-listing>li{
    border-bottom: 1px solid #E5E5E1;
    position: relative;
    padding: 0 95px 24px 40px;
    cursor: pointer;
    margin-bottom:24px;
}

/*.workplace-listing>li:first-child{ // Unused CSS - Nisha
    padding-top:0;
}*/

.workplace-listing>li:last-child{
    border-bottom:initial;
}


.workplace-details{
    min-height: 30px;
}

.workplace-icon{
    position: absolute;
    left: 0;
    top:40%;
    transform:translateY(-50%);
    width: 24px;
    height: 24px;
}

.workplace-icon img{
    width:100%;
}

.workplace-item--right{
    position: absolute;
    right: 0;
    top: 0;
    text-align:right
}

.workplace-teammember ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.workplace-teammember ul li{
    width: 23px;
    display:inline-block;
}

.workplace-teammember ul li .profile-icon {
    width: 30px;
    height: 30px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 2px solid #fff;
    background: #fff;
}

.workplace-teammember ul li .member-dotdotdot{
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    width: 110%;
    height: 110%;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.workplace-teammember ul li .member-dotdotdot>div{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
}

.workplace-teammember ul li .member-dotdotdot>div span,
.workplace-teammember ul li .member-dotdotdot>div:after,
.workplace-teammember ul li .member-dotdotdot>div:before{
    content:"";
    display:inline-block;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#FFF;
}

.workplace-teammember ul li .member-dotdotdot>div span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.workplace-teammember ul li .member-dotdotdot>div:after{
    position:absolute;
    top:50%;
    left:30%;
    transform:translate(-50%,-50%);
}

.workplace-teammember ul li .member-dotdotdot>div:before{
    position:absolute;
    top:50%;
    left:70%;
    transform:translate(-50%,-50%);
}

.workplace-teammember--icon{
    display: inline-block;
    border: 1px solid black;
    width: 20px;
    height: 20px;
}

.workplace-list--search-content ul{
    padding:0;
    margin:0;
    list-style: none;
}

.workplace-list--search-content li{
    padding: 20px 0;
    border-bottom: 1px solid #E5E5E1;
}

.workplace-list--search-content li:first-child{
    padding-top:10px;
}

.workplace-list--search-content li:last-child{
    border-bottom:initial;
}

.workplace-list--search-content .project-card {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.workplace-list--search-content .project-card:last-child{
    margin: 0;
}

.topic-item {
    display: block;
    width: 100%;
}
.topic-item label{
    display: table;
    width: 100%;
}
.topic-icon--avatar{
    display: table-cell;
    width: 50px;
}
.topic-name--action{
    display: table-cell;
    width: calc(100% - 50px - 70px);
}
  
.topic-item--action{
    display: table-cell;
    width: 70px;
}

.cursor{
    cursor: pointer;
}

.padding-top-none{
    padding-top: 0;
}
.padding-none{
    padding: 0;
}
.backbar{
    background-color: #000;
    color: #fff;
}

.backbar a,.backbar button{
    color: #fff;
}


.drawer-modal{
    top: 100px;
    box-shadow: 0px -17px 29px 0px rgba(75, 54, 0, 0.07), 0px -6.205px 10.585px 0px rgba(75, 54, 0, 0.05), 0px -3.013px 5.139px 0px rgba(75, 54, 0, 0.04), 0px -1.477px 2.519px 0px rgba(75, 54, 0, 0.03), 0px -0.584px 0.996px 0px rgba(75, 54, 0, 0.02);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.drawer-title1{
    font-family: 'Platform Bold', sans-serif;
    margin: 24px 0;
}
.drawer-modal .modal-header{ border-bottom: none }
.drawer-modal .modal-footer{ border-top: none }
.drawer-modal{
    font-size: 14px;
    font-weight: 400 ;
    line-height: 18px;
    color: #000;
}

.drawer-modal .form-group label:not(.error){
    font-size: 14px;
    color: #75716B;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
}

.drawer-modal .form-group .form-control{
    margin-top: 8px;
    border: 1px solid #C0BFBB;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}
.drawer-modal .modal-fullscreen{
    height: calc(100% - 100px );
}
.modal .first-level-content-sticky{
    position: sticky; 
    top: 0; 
    background: #F5F5F5;
    padding: 0px 10px 0 10px;
    margin: 0;
    z-index: 60; /*change to 60, previously 10 but play icon for video in media workplace will be above the stick nav*/
}

.allfiles-media--thumbnail{
    border: 1px solid black;
    width: 50px; 
    height: 50px; 
    float: left;
}

.tab-content--panel{
    display: none;
}

.tab-content--panel.active{
    display: block;
}

.project-teammember--listing{
    position: relative; 
    height: 40px; 
    display: table; 
    margin-bottom: 20px;
}

.project-teammember--avatar{
    width: 40px; 
    height: 40px; 
    display: table-cell; 
    vertical-align: middle;
    border-radius: 50px;
}
.project-teammember-panel--item{
    padding: 0;
}

.project-teammember--name{
    display: table-cell; 
    vertical-align: middle;
    padding-left: 20px;
}
.document-item{
  
}
.projectcost--panel{
    padding: 0;
}

.projectcost--item{
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E5E1;
}
.projectcost-media--listing{
    display: flex;
}
.projectcost-media--item{
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    padding-top: 12%;
    width: 17%;
    border: 1px solid black
}


.projectcost-document--item{
    display: block;
}

.projectcost-document--item,.projectcost-document--item:hover,.projectcost-document--item:focus{
    border-radius: 500px;
    border: 1px solid #000;
    position: relative;
    margin-right: 10px;
    /* padding: 15px 15px 5px 52px; */
    padding: 15px;
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    word-break: break-all;
    line-height: 25px;
    font-size: 12px;
}
.projectcost-costing-details{
    margin-top: 8px;
    font-size: 12px;
}
.projectcost-costing-details span{
    margin-left: 5px;
}

.projectcost-costing-details span:first-child{
    margin-left: 0;
}
.projectcost-remarks{
    margin: 20px 0 0 0;
    border: 1px solid #C0BFBB;
    background: #F5F5F5;
    padding: 8px;
    border-radius: 6px;
}
.projectcost-remarks a[data-readmore-toggle]{
    color: #EFAC00;
    font-size: 14px;
    line-height: 14px;
}
.projectcost-remarks--content{
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;
}

.projectcost-remarks--content a{
    color:#EFAC00;
}



.task-stage--panel{
    margin-bottom: 40px;
}
.task-stage--name{
    position: sticky; 
    top: 40px;
    background-color: #fff;
    z-index: 2;
}
.task-milestones--panel{
/*    position: sticky; */
/*    top: 65px;*/
    background-color: #F5F5F5;
  
}
.milestone-section--evt{
    position: sticky;
    top: 40px;
    z-index: 2;
}

#workplace-projecttasks-modal .milestone-section--evt{
    top: 75px;
}



.task-item--evt{
    cursor: pointer;
}

.task-milestones--item{
    padding-right: 50px;
    position: relative;
    cursor: pointer;
}
.task-milestones--action{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
}
.task-item{
    background-color: #fff;
    border-bottom: 1px solid #F5F5F5;
    padding: 20px 35px 20px 25px;
    position: relative;
}

.task-item--reply{
    position:relative;
    display:inline-block;
}

.task-item--reply-dot{
    position:absolute;
    top:0;
    right:-3px;
    width:8px;
    height:8px;
    background:red;
    border:2px solid #FFF;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
}

.flag-item{

}


.flag-item .task-item--date{
    border: 1px solid #EE4056;
    color: #EE4056;
}

.flag-item  .task-arrow--icon path{
/*    fill: #F5F5F5;*/
    stroke: #EE4056
}

.task-main--icon{
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -10px;
}
.task-item--date{
    border: 1px solid #F5F5F5; 
    display: inline-block
}
.task-arrow--icon{
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px;
}

.allfiles-media--thumbnail{
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    padding-top: 30%;
    width: 30%;
    border: 1px solid black;
    margin: 5px 5px 10px;
}
.project-list-all-lottie,
.project-list-incomplete-lottie,
.project-list-completed-lottie,
.project-listing-loading,
.task-list-all-lottie,
.task-list-incomplete-lottie,
.task-list-completed-lottie,
.tasks-listing-loading,
.workplace-allfile-media-lottie,
.workplace-allfile-docs-lottie{
    padding-top: 35%;
}
.project-list-all-lottie>.lottie-gallery--item,
.project-list-incomplete-lottie>.lottie-gallery--item,
.project-list-completed-lottie>.lottie-gallery--item,
.project-listing-loading>.lottie-gallery--item,
.task-list-all-lottie>.lottie-gallery--item,
.task-list-incomplete-lottie>.lottie-gallery--item,
.task-list-completed-lottie>.lottie-gallery--item,
.tasks-listing-loading>.lottie-gallery--item,
.project-loadmore-lottie--loading>.lottie-gallery--item,
.tasks-loadmore-lottie--loading>.lottie-gallery--item,
.workplace-projectcosts-lottie>.lottie-gallery--item,
.workplace-allfile-media-lottie>.lottie-gallery--item,
.workplace-allfile-docs-lottie>.lottie-gallery--item{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.project-loadmore-lottie--loading>.lottie-gallery--item svg,
.tasks-loadmore-lottie--loading>.lottie-gallery--item svg{
    max-width: 50px;
}

.workplace-projectcosts-lottie>.lottie-gallery--item>.lottie-gallery--item-content,
.workplace-allfile-media-lottie>.lottie-gallery--item>.lottie-gallery--item-content,
.workplace-allfile-docs-lottie>.lottie-gallery--item>.lottie-gallery--item-content{
    width: 70%;
}
.workplace-allfiles-tabs{
    text-decoration: none;
}
.workplace-allfiles-tabs:hover{
    text-decoration: none;
}
.workplace-allfiles-tabs.active{
    border-bottom: 2px solid #FFD200;
    text-decoration: none;
    color:#000;
    font-weight:bold;
    padding-bottom:2px;
}
.workplace-projectcosts--tabs{
    padding-top: 30%;
}

.play-icon-wrapper{
    position: absolute;
    top: 50%;
    margin: -20px 0 0 -20px;
    left: 50%;
}

.thumbnail-img{
    width: 100%;
    padding-top: 100%;
}

.sub-task-card{
    border-radius: 12px;
    margin-top: 24px;
    padding: 20px 10px;
    background: #fff;
    box-shadow: 0px 7px 27px 0px rgba(75, 54, 0, 0.05), 0px 2.924px 11.28px 0px rgba(75, 54, 0, 0.04), 0px 1.564px 6.031px 0px rgba(75, 54, 0, 0.03), 0px 0.877px 3.381px 0px rgba(48, 34, 0, 0.03), 0px 0.466px 1.796px 0px rgba(75, 54, 0, 0.02), 0px 0.194px 0.747px 0px rgba(75, 54, 0, 0.01);
    position: relative;
    border: 1px solid #C0BFBB;

}

.sub-task-card.parent-taskonly{
    padding: 0px;
    background: none;
    box-shadow: none;
    border: none;
}
.subtask-status--panel{
    position: absolute;
/*    right: 32px;*/
    right: 15px;
    top: 15px;
}
.sub-task-card .subtask-status--panel{
    top: 2px;
    right: 0;
}

.sub-task-card .form-group label[for]{
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
}
.sub-task-card .form-group label[for].error{
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
}

.subtask-intro--txt{
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
}
.sub-task-body{
    font-family: 'DM Sans', sans-serif;
    position: relative;
}
.sub-task-body h6{
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-top: 16px;
}
.add-sub-card--btn,.add-sub-card--btn:focus,.add-sub-card--btn:hover{
    border: 1px dashed #C0BFBB;
    display: block;
    border-radius: 6px;
    padding: 16px;
    margin: 10px 0;
    text-decoration: none;

}
.remarks-section{
    margin-top: 16px;
}

.remarks-section .form-control{
    border: 1px solid #C0BFBB !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000 ;
}

textarea::placeholder{
    color: #75716B !important;
    font-style: italic;
}


.grey-bg{
    background-color: #e5e5e1;
}

.modal.fade-in-right,
.modal.fade-in-left,
.modal.fade-in-bottom,
.modal.fade-in-top{
    transition: opacity .15s linear;
}

.modal.fade-in-right .modal-dialog,
.modal.fade-in-left .modal-dialog,
.modal.fade-in-bottom .modal-dialog,
.modal.fade-in-top .modal-dialog{
    transition: transform .3s ease-out;
}

.modal.fade-in-right:not(.show),
.modal.fade-in-left:not(.show),
.modal.fade-in-bottom:not(.show),
.modal.fade-in-top:not(.show){
    opacity: 0;
}

.modal.fade-in-right .modal-dialog{
    transform: translate3d(20vw, 0, 0);
}

.modal.fade-in-left .modal-dialog{
    transform: translate3d(-20vw, 0, 0);
}

.modal.fade-in-bottom .modal-dialog{
    transform: translate3d(0, 20vh, 0);
}

.modal.fade-in-top .modal-dialog{
    transform: translate3d(0, -20vh, 0);
}

.modal.show .modal-dialog {
    transform: translate3d(0, 0, 0);
}



.hide{
  display: none;
}

.dropdown-menu{
  z-index: 993;
  padding: 0;
  margin: 0;
  top: 20%;
  min-width: 200px;
  font-size: 15px;
  line-height: 19px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
}

.dropdown-menu>li {
  padding: 0 0;
  border-bottom: 0;
  margin: 0;
}

.dropdown-menu.pma-dropdown-menu>li a {
    padding: 10px 5px;
    display: inline-block;
}

.dropdown-menu>li>a {
    position: relative;
    white-space: normal;
    width: 100%;
    font-size: 15px;
    line-height: 19px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
}

.page-header--container{
  position:relative;
}

.page-header--container span{
  margin-right: auto;
}

.page-header--cta-container{
  position:absolute;
  top:45%;
  transform:translateY(-50%);
  right:20px;
  z-index: 10;
}

.page-header--search{
    width:100%;
    position:relative;
}

.page-header--search-input{
    position:relative;
}

.page-header--search-input input{
    width:calc(100% - 14px);
    padding: 10px 50px 10px 20px;
    border-radius:10px;
    border:3px solid transparent;
    margin-left:14px;
    font-style: italic;
    font-size:19px;
    line-height:25px;
}

.page-header--search-input:after{
    content: '';
    display:inline-block;
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    width:25px;
    height:25px;
    pointer-events:none;
    background:url(../images/search-icon.svg) no-repeat;
    background-size:cover;
}

.page-header--search-input input:focus,
.page-header--search-input input:focus-visible,
.page-header--search-input input:visited{
    border:3px solid #f8d447;
    outline:none;
}

.page-header--search-task-date{
    border: 1px solid #FFF;
    border-radius: 5px;
    padding: 5px 15px;
    font-size:16px;
    display:inline-block;
    margin-left:15px;
    margin-top:20px;
}

.page-header--search-task-date p{
    display:inline-block;
    vertical-align: middle;
    margin-bottom:0;
}

.page-header--search-task-date a{
    display:inline-block;
    vertical-align: middle;
    margin-left:5px;
    margin-top:-5px;
}

.page-header--search-task-date a svg{
    width:18px;
    height:18px;
}

.footer-spacer{
    height:80px;
}

.general-loading--wrapper{
    width:100%;
    height:100%;
    position: fixed;
    top: 0;
    left: 0;
/*    transform: translate(-50%, -50%);*/
    z-index: 300;
    pointer-events:none;
}

/*.general-loading--wrapper>*{
    width:100%;
    height:100%;
}*/

.gallery {
    color: #fff;
    position: relative;
    z-index: 6;
    left: -40px;
    width: calc(100% + 80px);
    /*margin-top: 10px;*/
    /*padding-right: 16px;*/
}

.gallery .owl-carousel{
  padding-left: 24px;
  padding-right: 24px;
}

.gallery .owl-item {
    margin-top: 15px;
    width: 52px !important;
}

.gallery .owl-dots{
    display: none;
}

.gallery .owl-prev {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    display: block !important;
    border:0px solid black;
}

.gallery .owl-next {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    right: 4px;
    display: block !important;
    border: 0px solid black;
}

.img-table.document .remove-img--btn {
    top: 4px;
    right: 10px;
    /* left: 42%; */
}

.img-table {
    display: table;
    width: 100%;
    position: relative;
    margin-top: 20px;
}

.img-table.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}

.img-table-cell {
    text-align: center;
    /*width: 100%;*/
    display: table-cell;
    vertical-align: middle;
    padding: 0px;
    position: relative;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
    height: 52px;
    width: 52px;
}

.remove-img--btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #FFD200;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    line-height: 26px;
    color: #fff;
    font-size: 14px;
    z-index: 5;
    cursor: pointer;
    color: #000;
}

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

.remove-img--btn .md-close {
    margin-top: -0.2em;
    margin-bottom: 0.8em;
    margin-left: 7px;
}

.remove-img--btn .md-close:before {
    background-size: 10px;
    width: 10px;
    height: 10px;
}

.remove-img--btn:focus,
.remove-img--btn:active,
.remove-img--btn:hover {
    color: #000;
    text-decoration: none
}

.gallery .owl-carousel .owl-item .remove-img--icon{
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.feed-listing .img-table-cell {
    height: 50px;
}

.feed-listing .img-table-cell.document{
    height: 32px;
}

.img-table-cell img {
    max-width: 100%;
    max-height: 80px;
    margin: 0 auto;
}

.img-table-cell img.document {
    max-width: 40px;
}

.img-table-cell img.img {
    max-height: 80px;
}

.img-table-cell.document{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 28px 8px 16px;

    border: 1px solid #000;
    box-sizing: border-box;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    color: #fff;
    background: transparent;
    height: 32px;
    width: 100%;
    margin-bottom: 20px
    /*cursor: pointer;*/
}
.img-table-cell.document .input-container2{
    position: absolute;
    right: 4%;
    transform: translate(50%,-50%);
    padding-left: 30px;
}
.img-table-cell.document.active{
    border-color: #EFAC00;
}

.img-table.flex-wrap .img-table-cell.document{
    width: calc(50% - 16px);
    margin-right: 16px;
}

.img-table-cell.document .clickable-cell{
  cursor: pointer;
}

.img-table-cell.document{
    max-width: calc(100% - 20px);
}

.chat-bar .img-table-cell.document{
    background:transparent;
    border:1px solid #FFF;
    margin-bottom:0px;
    white-space: nowrap;
    overflow: hidden;
    width: 300px;     
    /* width: 45%; */
}

.chat-bar .img-table-cell.document .text-wrapper{
    color:#FFF;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offcanvas .img-table-cell.document{
    max-width: 424px;
}

.img-table-cell.document.media-uploading{
    opacity: 0.5;
}

.img-table-cell.document .icon-wrapper{
    margin-right: 8px;
    color: #FFD200;
}

.img-table-cell.document .text-wrapper{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #000;
    text-align: left;
    word-break: break-all;
}

#gallery2 .owl-item{
    width: unset !important;
}

#gallery2 .owl-stage{
    width: 20000px !important;
    /*overflow: hidden;*/
}

#gallery progress[value] {
    -webkit-appearance: none;
    appearance: none;
}
#gallery progress {
    -webkit-appearance: none;
    appearance: none;
}

#gallery progress::-webkit-progress-bar {
    background:#FFD200;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

#gallery progress {
    background:#FFD200;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
#gallery progress {
    width: 80%;
    position: absolute;
    left: 8%;
    top: 50%;
    z-index: 1;
    height: 16px;
    padding: 5px;
    background: white;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.timeline-media-details {
    margin: 8px 0;
}

.feed-media-container{
    display: flex;
}

.feed-media-container .feed-media-wrapper{
    display: flex;
    padding-right: 8px;
    flex: 1 1 auto;
}

.feed-media-container .feed-media-wrapper.last-child{
    padding-right: 0;
}

.feed-media-container .feed-media-wrapper.visibility-hidden{
    flex: 0;
    padding: 0;
    position: absolute;
}

.timeline-media-details .feed-media-container.document{
    flex-wrap: wrap;

    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-rows: auto;
}

.feed-media-container.document .feed-media-wrapper{
    flex: 50%;
    min-width: 0;
    margin: 0;
    margin-bottom: 8px;
    padding-right: 0;
    background: unset;
}

.feed-media-container.document .feed-media-wrapper:nth-child(2n){
    padding-right: 0;
    padding-left: 0;
}

.play-icon-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    pointer-events: none;
    z-index: 50;
    background: #FFD200;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    opacity: 0.7;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon {
    content: url(../images/play-icon.svg);
    width: 16px;
    height: 16px;
}

.social-media--item {
    width: 100%;
    height: 76px;
    position: relative;
    text-align: center;
    border: 1px solid #C0BFBB;
    box-sizing: border-box;
    vertical-align: middle;
    overflow: hidden;
    align-items: center;
    display: flex;
    justify-content: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
}

.social-media--item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.social-media--item img {
    transform: scale(1.5);
}

.social-media--item img.doc-icon {
    transform: scale(1);
    width: 40px;
    position: absolute;
    top: 0;
}

.social-media--item.document {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #000000;
    box-sizing: border-box;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    /* max-height: 64px; */
    height: 100%;
    width: 100%;
}

.social-media--item.document a{
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
}

.social-media--item.document .icon-wrapper{
    margin-right: 8px;
    color: #000000;
}

.social-media--item.document .text-wrapper{
    /*font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;  Redundant CSS */
    font-size: 12px;
/*    line-height: 16px;*/
    color: #000000;

    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    /*white-space: nowrap;*/
}

.thumbnail--overlay span{
    font-family: 'Platform Bold', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.thumbnail--overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    font-size: 22px;
    line-height: 80px;
    color: #fff;
    pointer-events: none;
    padding-left: 20px;
    z-index: 60;
}

/*### CHAT ###*/
/*CHAT BUBBLE*/
#workplace-modal .modal-footer,
#task-reply-thread-modal .modal-footer,
#feed-reply-thread-modal .modal-footer,
#forward-modal .modal-footer{
  padding:0;
  border:none;
}

#workplace-modal .workplace--archive-header{
    position: fixed;
    top: 62px;
    left: 0;
    width: 100%;
    background: #FFD200;
    color: #000;
    padding: 10px;
    text-align: center;
    z-index:10;

    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}


.feed-listing{
  margin: 10px 10px 0 10px;
  padding: 0;
  list-style: none;
  padding-bottom:10px;
  min-height:60vh;
  position:relative;
}

.feed-listing li{
  animation: feedItemAppear 0.5s forwards ;
}

.feed-listing li:hover{
    z-index:9;
}

.feed--show-replies--red-dot {
    display: inline-block;
}

.feed--show-replies--red-dot {
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: .125rem solid;
    display: inline-block;
    color: #EE4056;
    background-color: #EE4056;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    margin-left: 8px
}

.task-reply-container .task-reply-wrapper .red-dot{
    background: #EE4056; 
    width: 10px; 
    height: 10px;

    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

.task-meta .red-dot{
    background: #EE4056; 
    width: 10px; 
    height: 10px;
    top: -5px;
    left: -5px;
    position: relative;
    margin-right: 0 !important;

    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

.feed-replies-profile--listing {
    list-style: none;
    padding: 0;
    margin: 4px 20px 0 0;
    display: inline-block;
    float: left;
}

.feed-replies-profile--listing li {
    width: 14px;
    float: left;
}

#feed-reply-thread-modal .show-replies--btn,
#feed-reply-thread-modal .timeline-topic-wrapper,
#task-reply-thread-modal .show-replies--btn,
#task-reply-thread-modal .timeline-topic-wrapper{
    display:none;
}

.profile-icon3 {
    width: 16px;
    height: 16px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
}

.feed--show-replies--item-alignment-content {
    display: flex;
    align-items: center;
}

.feed-listing li.own-bubble .timeline-footer .momentOfDate {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #000000;
}

.blur-in{
    filter: blur(4px);
}

.feeds--item .cta-container{
  display: none;
  position: absolute;
  bottom: -16px;
  right: 0;
  margin-right: 24px;
  z-index: 300;
}

.feeds--item:not(.focused-area):hover .cta-container{
  /* display: flex; */
}

.feeds--item .cta-container .show-replies--btn, .feeds--item .cta-container .show-replies--btn{
    padding: 0;
}

.feeds--item .cta-container .cta-button:first-child,
.feeds--item .cta-container .cta-button:not(:last-child),
.feeds--item .cta-container .cta-button:first-child,
.feeds--item .cta-container .cta-button:not(:last-child){
    margin-right: 8px;
}

.feeds--item .cta-container .cta-button.darkBg,
.feeds--item .cta-container .cta-button.darkBg{
    background: #000000;
}

.feeds--item .cta-container .cta-button, .feeds--item .cta-container .cta-button{
  height: 34px;
  width: 34px;
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.feeds--item .cta-container .cta-button.redBg,
.feeds--item .cta-container .cta-button.redBg {
    background: #EE4056;
}

.show-replies--btn {
    display: block;
    padding-top: 10px;
}


.workplace-reply-icon{
    content: url("../images/workplace-reply-icon.svg");
    width: 50%;
}

.workplace-reply-icon-v2{
    content: url("../images/workplace-reply-icon-v2.svg");
    width: 50%;
}

.workplace-reply-icon.forward{
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.workplace-edit-icon{
    content: url("../images/workplace-edit-icon.svg");
    width: 50%;
}

.workplace-copy-icon{
    content: url("../images/workplace-copy-icon.svg");
    width: 50%;
}

.workplace-delete-icon{
    content: url("../images/workplace-delete-icon.svg");
    width: 50%;
}


.feed-listing li.first-bubble {
    margin-top: 16px;
}
.feed-listing li.own-bubble {
    background: #FFD200;
    border: none;
}
/*.feed-listing>li {
    margin-left: 36px;
    margin-right: 48px;
}*/
.feed-listing>li {
  max-width:450px;
  width:80%;
  position: relative;
  background: #fff;
  padding: 15px;
  color: #000000;
  flex: 1;
  margin:0 auto;
  margin-bottom: 15px;
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

.feed-listing li.temporary-plain--item, .feed-listing li.plain--item {
    max-width:500px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    border: none;
    background: none;
}

.feed-listing .new--item h3 {
    color: #EFAC00;
}

.feed-listing h3 {
    font-size: 15px;
    display: flex;
    flex-direction: row;
/*    font-weight: 700; Folow the figma - Nisha */
    color: #75716B;
    margin:24px auto 13px;
}

.feed-listing h3:before, .feed-listing h3:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid #75716B;
    margin: auto;
}

.feed-listing .new--item h3:before, .feed-listing .new--item h3:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid #EFAC00;
}

.feed-listing h3:after {
    margin-left: 10px;
}

.feed-listing h3:before {
    margin-right: 10px;
}

.feed-content--panel {
    position: relative;
}

.feed-content--panel .updates-done--panel{
    display:block;
}
.taskupdate--panel {
    display: block;
}

.feeds-category--form input{
    color:inherit;
}

.feed-chat--category-container{
    display:none;
    position: relative;
    margin: 0 auto;
    width: 10000px;
    height:auto;
    padding:10px 20px;
    white-space: nowrap;
    overflow-x: scroll;
}

.feed-chat--category-container ul{
    margin: 0;
}

.feed-chat--category-container ul li{
    display:inline-block;
    margin-right:15px;
    margin-bottom:0px;
    border: 1px solid #000;
    padding: 6px 15px;
    border-radius: 15px;
}

.feed-chat--category-container ul li img{
    display:none;
}

.feed-listing li.own-bubble.first-bubble:after{
  position: absolute;
  width: 27px;
  height: 30px;
  content: "";
  background: url(../images/Bubble.svg?v=2) no-repeat;
  right: -11px;
  left: auto;
  top: -1px;
  bottom: auto;
  transform: rotate(0deg);
}

.feed-listing>li.first-bubble:not(.plain--item):not(.system--item):not(.own-bubble):after {
    position: absolute;
    width: 27px;
    height: 30px;
    content: "";
    background: url(../images/Bubble-white.svg) no-repeat;
    left: -12px;
    top: -1px;
}

.reply-thread-template .timeline-profile{
    margin-right: 8px;
    width: 42px;
    height: 42px;
}

.timeline-profile {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 26px;
    height: 26px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    vertical-align: middle;
}

.timeline-user-details {
    display: inline-block;
    vertical-align: middle;
}

/*.own-bubble .timeline-user--name, .own-bubble .timeline-user--designation {
    color: #000;
} Redundant CSS - Nisha */
.timeline-user--name {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700; 
    font-size: 17px;
    line-height: 23px;
    color: #000000;
    margin-bottom:5px;
}

.timeline-description, .timeline-description p {
    /* font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000; Redundant CSS - Nisha */
    margin-top: 15px;
    margin-bottom: 15px;
}
.timeline-description {
    word-wrap: break-word;
    overflow: hidden;
}

.feed-listing li.own-bubble .timeline-footer {
    color: #000;
}
.feed-listing li .timeline-footer, .feed-listing li.system--item .timeline-footer, .feed-listing li.system--item hr, .feed-listing li.system-error--item .timeline-footer, .feed-listing li.system-error--item hr {
    color: #75716B;
    border-color: #000;
}
.timeline-footer {
    color: #fff;
    margin: 10px 0;
}

.feed-listing .timeline-footer .timeline-footer-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeline-topic {
    position: relative;
    padding: 4px 8px;
    border: 1px solid #6F4E25;
    box-sizing: border-box;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    color: #FFFFFF;
    background: #FFFFFF;
    /*font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;*/
    font-size: 12px;
    /* line-height: 16px;*/
}

.feed-listing li.own-bubble .timeline-footer-panel .timeline-date-wrapper {
    color: #000000;
}

.feed-listing .feeds--item.focused-area {
    z-index: 500;

    /*position:absolute;
    bottom: 80px;
    transform: translateX(-50%) !important;
    left: 50%;*/
}

.feed-profile--panel{
    position: absolute;
    left: -40px;
    top: 0px;
}

.feed-profile--panel .timeline-profile{
    border:0.5px solid #75716B;
    border-radius:50%;
}

.timeline-footer-panel .timeline-date-wrapper {
    /*font-family: 'DM Sans', sans-serif; Redundant CSS - Nisha 
    font-style: normal;
    font-weight: 400;*/
    font-size: 12px;
    /*line-height: 16px;*/
    color: #75716B;
}

.timeline-date-wrapper span {
    margin-left: 4px;
}

#feed-reply-thread-modal .timeline-date-wrapper span{
    margin-left: 0px;
}

.timeline--filter {
  color:#FFF;
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  border: none;
  padding: 0 10px;
  margin: 0;
  line-height: 30px;
  text-decoration: none;
  font-size: 22px;
}

.timeline--filter:hover{
  color:#FFF;
  text-decoration:none;
}

.timeline--filter i{
    vertical-align: middle;
}

.badge.style-danger {
    background-color: #f44336;
    border-color: #f44336;
    color: #ffffff;
}

.badge:empty {
    display: none;
}

.badge {
    position: absolute;
    width: 10px;
    height: 10px;
    padding: 0;
    top: 2px;
    left: 22px;
    display: none;
    border-radius:50%;
    background: red;
}

/*Chat bubble ended*/


.feedList-container{
/*    height:100%;*/
    display: flex;
    flex-direction: column-reverse; /* Reverses the order of content */ 
/*    overflow-y: scroll;*/
    overflow-x: hidden;
}

.feedList-container .feeds--item .mog-container-fluid{
    margin:0;
}

.timeline-lottie,
.workplace-search-lottie{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    text-align:center;
    display:none;
}

.timeline-lottie.showFlex,
.workplace-search-lottie.showFlex{
    display: block;
}

.workplace-search-lottie{
    width:150px;
    top:50%;
    transform:translate(-50%,-50%);
}

.workplace-noresult-lottie{
    max-width:450px;
    width:100%;
    height:auto;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) !important;
    display:none;
}

.workplace-noresult-lottie p{
    max-width:230px;
    width:100%;
    margin:0 auto;
    padding:15px 0;
    text-align:center;
}



.chat-bar {
    padding: 16px 64px 32px 64px;
    background: rgba(56, 54, 51, 1);
    width: 100%;
    z-index: 500;
    position: relative;
    margin:0;
}

.chat-left--panel {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(56, 54, 51, 1);
  width: 100%;
  z-index: 5;
}

.chat-left--panel {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(56, 54, 51, 1);
  width: 100%;
  z-index: 5
}

.chat-upload-option--btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  max-height: 300px;
  text-align: center;
  padding-top: 10px;
  height: 100%;
}

.chat-send-option--icon {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 50px;
  height: 40px;
  text-align: center;
  margin-top: 10px;
  color: #FFF !important;
  padding-top: 15px;
  display: flex;
  justify-content: center;
}

.chat-send-option--icon.disabled{
  pointer-events: none;
  opacity:0.15;
}

.chat-edit-cancel-option--icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 30px;
  text-align: center;
  margin-top: 10px;
  color: #FFF !important;
  padding-top: 15px;
  display: none;
  justify-content: center;
  z-index: 10;
}

.add-file-icon-wrapper{
  cursor: pointer;
}

.chat-edit-cancel-option--icon:focus,
.chat-edit-cancel-option--icon:hover,
.chat-upload-option--icon:focus,
.chat-upload-option--icon:hover,
.chat-send-option--icon:focus,
.chat-send-option--icon:hover {
  color: #EFAC00 !important;
  border-color: #fff;
  text-decoration: none !important;
}

.chat-upload-option--icon {
  position: relative;
  left: 9px;
  width: 100%;
  font-size: 25px;
  text-align: center;
  color: #FFD200 !important;
  text-decoration: none !important;
  top: 20px;
  padding-top: 5px;
  z-index: 2;
  background: rgba(56, 54, 51, 1);
  display: flex;
  justify-content: center;
  text-decoration: none;
}

.chat-bar.white-background,
.chat-left--panel.white-background,
.chat-upload-option--icon.white-background {
  background: #FFFFFF;
}

.chat-bar.active {
  overflow: visible;
}

.chat-add-icon {
  content: url("../images/black-add-icon.svg");
}

.chat-post-icon {
  content: url("../images/black-post-icon.svg");
}

.chat-send-option--icon,
.chat-send-option--icon:hover {
  text-decoration: none;
}

.chat-send-option--icon i,
.chat-edit-cancel-option--icon i {
  color: #FFD200 !important;
  font-size: 25px;
}

.chat-upload--menu {
  display: block;
  position: absolute;
  width: 40px;
  left: 8px;
  top: 0px;
  background: #FFD200;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  z-index: 1;
  padding: 10px 0;
  visibility: hidden;
  display:none; /* Temporary use this instead of visibility Hidden */
}

.chat-upload--menu.shadow-background {
  background: #FFFFFF;
  border: 1px solid #E6E5E1;
  box-sizing: border-box;
  box-shadow: 0px 17px 34px rgba(75, 54, 0, 0.12), 0px 6.20528px 12.4106px rgba(75, 54, 0, 0.0827978), 0px 3.01255px 6.0251px rgba(75, 54, 0, 0.0667549), 0px 1.47681px 2.95361px rgba(75, 54, 0, 0.0532451), 0px 0.583932px 1.16786px rgba(75, 54, 0, 0.0372022);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
}

.chat-upload--menu.active {
  top: -80px;
  z-index: 5;
}

.chat-upload--menu a,
.chat-upload--menu a:hover.chat-upload--menu a:focus {
  display: block;
  text-decoration: none;
  font-size: 20px;
  line-height: 31px;
}

.chat-upload--menu a label {
  margin-bottom: 0;
  margin-top: 5px;
  cursor: pointer;
}

#normal-feed--channel {
  background: #fff;
  padding: 0 0px 0 5px;
  border: 1px solid black;
  position: relative;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  min-height: 52px;
  padding-right: 55px;
}

.main-post--form textarea {
    width: 100%;
    border: 1px solid #e5e6e6;
    outline: none
}

#normal-feed--channel .note-editor {
    max-height: 200px;
    padding-right: 55px;
}

/* No need padding, coz no filter btn */
#feed-reply-thread-modal #normal-feed--channel .note-editor,
#task-reply-thread-modal #normal-feed--channel .note-editor,
#task-reply-thread-modal #normal-feed--channel .note-editor.note-airframe .note-editing-area .note-editable{
    padding-right: 15px;
}

#normal-feed--channel .note-editor.note-airframe .note-placeholder,
#normal-feed--channel .note-editor.note-frame .note-placeholder {
    padding: 14px 0px 14px 16px;
    font-size: 16px;
    line-height: 22px;
    height: 50px;
    /* font-family: 'DM Sans', sans-serif; Redundant CSS - Nisha */
    font-style: italic;
     /* font-weight: normal; */
    /* line-height: 23px; */
    color: #75716B;
}

.note-editor.note-airframe .note-editing-area .note-editable a {
    text-decoration: underline;
}

.note-editor.note-airframe .note-editing-area, .note-editor.note-frame .note-editing-area{
    /* top: -15px; */
}

#normal-feed--channel .note-editor.note-airframe .note-editing-area .note-editable {
    /* padding: 13px 0 0 16px; */
    min-height: 20px;
    /* max-height: 50px; */
    max-width: 100%;
    color:#000;
    overflow: auto;
    height: 50px;
    padding: 15px 0 0 15px;
}

.teamMember-highlight {
    color: #B07B2A;
}

.chat-bar p {
    margin: 0;
    padding: 0;
    line-height: 22px;
    font-size: 18px;
}

.chat-bar .btn.btn-icon-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    background: #6F4E25;
    z-index: 2;
    padding: 8px 10px 8px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
}

.chat-bar .btn.btn-icon-toggle img {
    filter: invert(100%) sepia(9%) saturate(34%) hue-rotate(268deg) brightness(250%) contrast(107%);
    display: inline-block;
    vertical-align:middle;
    width: 100%;
    margin: -2px auto 0 auto;
}

.chat-edit-cancel-container{
  display: none;
  flex-direction: row;
  align-items: center;
  padding: 10px 18px;

  position: absolute;
  left: 50%;
  top: -65px;
  transform:translateX(-50%);

  background: #FFD200;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;

  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.75));
  cursor: pointer;
  z-index: 100;
  min-width: max-content;
}

.chat-edit-cancel-container.showFlex{
  display: flex;
}

.chat-edit-cancel-container .chat-edit-cancel-wrapper{
  height: 10px;
  width: 10px;
  margin-right: 8px;
}

.chat-edit-cancel-icon svg{
  display:inline-block;
  vertical-align: top;
}

.chat-edit-cancel-container .chat-edit-cancel-label{
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: #000000;
}

.taggable-panel{
    display: none;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    top: -195px;
    background: #F5F5F5;
    left: 0;
    z-index: 1000;
    /*height: 200px;*/
    overflow: auto;
    box-shadow: 0px 7px 27px rgba(0, 0, 0, 0.05), 0px 2.92443px 11.28px rgba(0, 0, 0, 0.0359427), 0px 1.56354px 6.0308px rgba(0, 0, 0, 0.0298054), 0px 0.876509px 3.38082px rgba(0, 0, 0, 0.025), 0px 0.465507px 1.79553px rgba(0, 0, 0, 0.0201946), 0px 0.193708px 0.747159px rgba(0, 0, 0, 0.0140573);
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.note-hint-item {
  padding: 10px 20px;
  color: #000;
  position: relative;
  display: table;
  width: 100%;
  cursor: pointer;
}

.note-hint-item.active,
/*.note-hint-item:hover,*/
.note-hint-item.selected{
  background: #FFD200;
  color: #000000;
}

.note-hint-item .user-designation {
  width: 30%;
  text-align: right;
  vertical-align: middle;
  display: table-cell;
}

.floating-bar-container{
  width:auto;
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
}

.floating-bar-wrapper{
  min-width:150px;
  width:auto;
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity 0.3s ease-in-out, top 0.5s ease-in-out;
  animation: floatingBarInit 0.3s forwards ;
  animation-delay: 0.2s;
}

.floating-bar-wrapper .floating-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 10px 8px 15px;
  background: #383633;
  box-shadow: 0px 7px 27px rgba(0, 0, 0, 0.05), 0px 2.92443px 11.28px rgba(0, 0, 0, 0.0359427), 0px 1.56354px 6.0308px rgba(0, 0, 0, 0.0298054), 0px 0.876509px 3.38082px rgba(0, 0, 0, 0.025), 0px 0.465507px 1.79553px rgba(0, 0, 0, 0.0201946), 0px 0.193708px 0.747159px rgba(0, 0, 0, 0.0140573);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 19px;
  color: #FFFFFF;
  z-index: 200;
}

.floating-bar .icon-Action_Close {
  margin-left: 8px;
  z-index: 300;
}

.note-popover.popover{
    position: absolute;
    top: initial !important;
    bottom: 50px;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    z-index: 1000;
    padding:0;

    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    overflow:hidden;
    /*display: none !important;*/
}

.note-hint-popover .popover-content .note-hint-group .note-hint-item.active, .note-hint-popover .popover-content .note-hint-group .note-hint-item:hover{
    background:rgba(248,212,71,0.8);
    color:#000;
}

.note-hint-popover .popover-content{
    padding:0;
}

.note-hint-popover .popover-content .note-hint-group .note-hint-item{
    padding:15px;
    line-height:1.4;
    border-bottom:1px solid #c0bfbb;
}

.note-hint-item .user-designation{
    color:#75716B;
}

.note-hint-popover .user-hint-item{
    display:table !important;
    width:100%;
}

.note-hint-popover .note-hint-item{
    white-space: nowrap
}

.note-editor{
    border-radius:12px;
    position: absolute;
    height: 50px;
    width: 100%;
    bottom: 0;
    left: 0;
}


@keyframes floatingBarInit {
  from {top: 0px;opacity:0;}
  to {top: 20px;opacity:1;}
}

@keyframes feedItemAppear{
  from {transform: translateY(-20px);opacity:0;}
  to {transform: translateY(0);opacity:1;}
}

/*### CHAT ENDED ###*/


.mfp-bg{
  z-index: 3000;
}
.mfp-wrap{
  z-index: 3000;
}
.mfp-content video{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 550px;
}

.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}
.mfp-inline-holder .mfp-content{
    max-width: 100%;
    width: auto;
}

.mfp-bottom-bar {
    left: unset;
    right: 50%;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    outline: none;
    box-shadow: none;
/*    box-shadow: 0 0 0 .25rem rgba(239, 172, 0, 1);*/
    
    border-color: #EFAC00;
}



.form-group .form-control{
    display: block;
    
}

/*.form-group .form-control{ // Redundant CSS - Nisha
    border: 1px solid black;
    margin-bottom: 0;
}*/


/* h2{ // Use bootstrap CSS instead
    margin: 0;
}*/

.task-loading-panel{
    /*position: absolute;
    width: calc(100% - 2rem);
    height:100%; 
    background: #fff;
    z-index: 2;*/
}

.task-loading-panel .lottie-gallery--item{
    max-width:80px;
    width:100%;
    margin:0 auto 20px;
}

/*.modal-fullscreen,*/
.modal,
.modal-backdrop{
    height: calc(100% - 82px);
}

.modal-whatsapp-call{
    top: calc(100% - 255px);
}
.btn2.whatsapp-btn, .btn2.whatsapp-btn:focus, .btn2.whatsapp-btn:hover {
    background: #00B485 !important;
    color: #fff !important;
    padding: 0 30px;
    line-height: 36px;
}

.whatsapps-call-action-buttons{
    display: flex;
    justify-content: center;
}

.assignee-whatsapp-call{
    color: #EFAC00;
}

#assignee-whatsapp-call a {
    max-width: 180px;
    margin: 0 2%;
    width: 45%;
    box-sizing: border-box;
    padding: 10px 5%;
    line-height:normal;
}

.assignee-whatsapp-call-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #000000;
    font-size: 20px;
    cursor: pointer;
}

.modal-title{
    max-width:65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
}

.modal-header{
    min-height:62px;
}
.black-bar{
    background: #000;
    color: #fff;
}

.black-bar h5{
    color: #fff;
    font-family: 'Platform Bold';
}

.black-bar button{
    color: #fff;
}

.info-val{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;

    color: #000000;
    font-size: 17px;
    padding: 5px 0px;
}
.workplace-project--detail{
    padding: 0;
}
.workplace-project-detail--parent{
    padding-bottom: 20px;
}
.workplace-project-detail-item--title{
    font-size: 15px;
}


/*form starts*/
label.error{
    color: #EE4056;
}


input[type].form-control.error,textarea.form-control.error,select.error,select.form-select.error,.select2-selection.error{
    border-color: #EE4056 !important;
}

textarea.form-control,input[type].form-control,select.form-select,select.form-control.form-control{
    border: 1px solid black;
}


textarea.form-control{
    resize: none;
}

.form-group{
    margin-bottom: 20px;
}

/* .btn{ // Unused CSS - Nisha
    border-color: #000;
}
.btn:hover{
    background: inherit;
}*/

.primary-submit--btn,.primary-submit--btn:hover,.primary-submit--btn:focus {
    background-color: #ffd100;
    color: black;
    padding: 17px 20px;
    border-radius: 50px;
    margin-top: 64px;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 19px;
    box-shadow: none;
}

.primary-submit--btn[disabled],input[type=button][disabled],input[type=submit][disabled]{
    opacity: 0.3;
    background-color: #ffd100;
}


.add-project--thumbnail{
  border: 2px dashed #C0BFBB; 
  border-radius: 12px;
  position: relative;
  overflow: hidden;
/*  height: 88px;*/
  width: 100%;
  padding-top: 97%;
}

.add-project--thumbnail svg{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  margin: -9px 0 0 -9px;
  color: #75716B;
}

.add-project--thumbnail svg path{
  stroke: #75716B;  
}

.upload-parent label{
    top:0;
    position: absolute;
    width: 100%; 
    height: 100%;
}
.upload-parent input[type='file']{
    /*display: none !important;*/
    pointer-events: none;
    opacity: 0.1;
    position: absolute;
    top: 0;
    height: 0.3px;
}

.uploading-panel{
  background: #fff;
  color: #000;
  -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
  width: 90%;
  margin: 0 auto;
  height:  40px;
  position: absolute;
  top:  50%;
  margin-top: -20px;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 10px 0 5px;
  font-weight: 700;
  font-size: 8px;
  display: none;
  box-shadow: 0px 7px 27px rgba(75, 54, 0, 0.05), 0px 2.92443px 11.28px rgba(75, 54, 0, 0.0359427), 0px 1.56354px 6.0308px rgba(75, 54, 0, 0.0298054), 0px 0.876509px 3.38082px rgba(48, 34, 0, 0.025), 0px 0.465507px 1.79553px rgba(75, 54, 0, 0.0201946), 0px 0.193708px 0.747159px rgba(75, 54, 0, 0.0140573);
}
.uploading-panel.small{
  font-size: 12px;
  height:  50px;
  padding-top: 10px;
  margin-top: -25px;
}

.uploading-panel.small .uploading-bar{
  margin-top: 5px;
}
.uploading-panel .uploading-bar{
  background: #E5E5E1;
  width: 100%;
  height: 6px;
  margin: 0 auto;
  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
  position: relative;
  overflow: hidden;
  margin-top: 0px;
}

.uploading-panel .uploading-bar span.loading{
  background: #FFD200;
  width: 0;
  /*transition:  width 2s;*/
  /*animation: progres 4s */
}

.upload-parent.error{
  border-color: red;
  color: red;
}
.taskimage-uploaded--wrapper{
    border: 3px solid #fff;
    border-radius: 14px;
    position: relative;
    margin-bottom: 15px;
}
.taskimage-uploaded--wrapper.active{
    border: 3px solid #FFD200;
}
.taskimage-uploaded--item{
    border: 1px solid #C0BFBB;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 87%;
    word-break: break-all;
    margin-bottom: 10px;

}
.taskimage-uploaded--item2{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 100%;
    word-break: break-all;
    cursor: pointer;

}

.taskimage-uploaded--item3{
    position: relative;
}
.taskimage-uploaded--item3 .taskimage-uploaded{
    border-radius: 3px;
    overflow: hidden;
}
.taskimage-uploaded:not(.taskimage--overlay){
    cursor: pointer;
    display: block;
    overflow: hidden;

    width: 100%;
    padding-top: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0px 7px 27px rgba(75, 54, 0, 0.05), 0px 2.92443px 11.28px rgba(75, 54, 0, 0.0359427), 0px 1.56354px 6.0308px rgba(75, 54, 0, 0.0298054), 0px 0.876509px 3.38082px rgba(48, 34, 0, 0.025), 0px 0.465507px 1.79553px rgba(75, 54, 0, 0.0201946), 0px 0.193708px 0.747159px rgba(75, 54, 0, 0.0140573);
}
.taskimage-uploaded--item2 i,
.taskimage-uploaded.video i{
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 210, 0, 0.7);
    width: 20px;
    height: 20px;
    text-align: center;
    margin: -10px 0 0 -10px;
    border-radius: 10px;
    line-height: 20px;
}
@media only screen and (min-width: 768px) {
    /*.taskimage-uploaded--item{
        padding-top: 97%;
        
    }*/

    .taskimage-uploaded--item2{

    }
}
.taskimage-uploaded--item .play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
}

.upload--listing .row>[class^="col"]{
    margin-bottom: 10px;
}
.taskimage-uploaded{
    width: 100%;
    height: 100%;
}

.no-pad{
    padding: 0 !important;
}

.tmog-btn{
    background: #FFD200;
    color: #000;
    border: none;
    border-radius: 12px;
    min-width: 100px;
    height: 30px;
}
.upload--listing label.error{
    position: absolute;
}

.drawer-modal .upload--listing label.error{
    position: relative;
    font-size: 10px;
    line-height: 11px;
}

.document--listing{
    margin-top: 20px;
}

.document-item,.document-item:hover,.document-item:focus{
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    padding: 25px 10px 25px 50px;
}

.project-allfiles--HTML{
    max-width:640px;
    margin:0 auto;
    position:relative;
    padding-top:30px;
}

.workplace-docs-item{
    list-style: none;
    margin: 0;
    color:#000;
}

.workplace-docs-item>li{
    border-bottom: 1px solid #C0BFBB;
}

.document-item .pdf-icon{
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: 15px;
}
.document-item .remove-icon{
    position: absolute;
    right: -12px;
    top: 50%;
    margin-top: -13px;
}


.completed-task-tabs .document-item{
    border-color: #fff;
    color: #fff;
}

.completed-task-tabs .pdf-icon svg path{
    stroke: #FFD200;
}
/*.modal{
    max-width: 640px;
    left: 50%;
    margin-left: -320px;
}
.modal-fullscreen{
    width: 100%;
}*/

/* .modal-fullscreen{ // Redundant CSS - Nisha
    width: 100%;
}
*/
.mog-container-fluid{
    margin: 0 12px;
}

.completed-task-tabs{
    padding-bottom: 15px;
    background-color: #383633; 
    color: white; 
    border-radius: 12px;
    margin-top: 24px;
    padding: 24px;
    font-family: 'DM Sans', sans-serif;
}

.flag-task--btn{
    margin-right:8px;
}

.flag-task--btn,.flag-task--btn:hover{
    border: 1px solid #fff;
    border-radius: 500px;
    line-height: 36px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    /* padding: 0 15px; */
    width: 40px;
    height: 40px;
    padding: 0 7px;
}
@media only screen and (max-width: 375px) {
    .flag-task--btn,.flag-task--btn:hover{
        font-size: 12px;
    }
}

.flag-task--btn svg{
    display: inline-block;
    width: 24px;
    position: relative;
}

.completed-task-tabs--footer{
    margin-top: 16px;
}

.completed-task-tabs--footer .round-action--btn{
    margin-left: 16px;
}
.drawer-backdrop{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.7); 
    top: 0; 
    left: 0; 
    z-index: 1100;
    display: none;
}
.bottom-drawer--item{
    position: absolute; 
    width: 100%; 
    height: 85vh; 
    bottom: -85vh; 
    z-index: 2200; 
    background: #fff;
    box-shadow: 0px -17px 29px 0px rgba(75, 54, 0, 0.07), 0px -6.205px 10.585px 0px rgba(75, 54, 0, 0.05), 0px -3.013px 5.139px 0px rgba(75, 54, 0, 0.04), 0px -1.477px 2.519px 0px rgba(75, 54, 0, 0.03), 0px -0.584px 0.996px 0px rgba(75, 54, 0, 0.02);
}

.bottom-drawer--item.active{
    bottom: 65px;
    transition: all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    
}
.round-action--btn{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #FFD200;
    display: block;
    line-height: 40px;
    text-align: center ;
}

.float-right{
    float: right;
}
.completed-task-tabs .taskimage-uploaded--item .play-icon{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
}

.completed-task-invoice--panel{
    border: 1px solid #fff; 
    padding: 8px 16px; 
    border-radius: 6px; 
    font-size: 16px;
    margin: 16px 0;
}

.bullet-dot{
    margin: 0 15px;
    font-size: 20px;
    line-height: 14px;
}

.task-drawer-taskupdate--panel .bullet-dot{
    margin: 0 5px;
    font-size: 11px;
    line-height: 14px;
}
/*form ends*/

/*task details popups*/
.completed-task-tabs ul{
    margin: 0;
}
.task-meta{
    font-size: 14px;
}
.task-meta--item{
    margin-top: 8px;
    font-size: 16px;
}

.task-meta--item-black-text{
    color:#000;
}

.task-meta--item-label{
    max-width: 90px;
    width: 100%;
    display: inline-block;
}

.task-header{
    padding-bottom:10px;
}

.task-header h5{
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-top: 20px;
}
.task-description{
    margin-bottom: 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color:#000;
}

.task-description a{
    color: #FFD200;
    font-weight: 600;
    word-break: break-word;
}

.task-reply-container {
    margin-top: 16px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    cursor: pointer;
    text-decoration: none !important;
    font-size: 14px;
}

.task-reply-container .task-reply-wrapper {
    display: flex;
    margin-right: 8px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
    font-size: 14px;
}

.task-reply-container .task-reply-wrapper:last-child {
    margin: 0;
}

.task-reply-container .task-reply-wrapper i {
    font-size: 18px;
    color: #75716B;
    margin-left: 5px;
}

.reply-thread-template .main-post--panel .timeline-label{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
    margin-bottom: 16px;
}

.reply-thread-template .main-post--panel .timeline-date{
    display: flex;
}

.reply-thread-template .main-post--panel .timeline-date .timeline-date-wrapper:first-child{
    margin-right: 8px;
}

.reply-thread-template .main-post--panel .timeline-date .timeline-date-wrapper{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: 160px;
    height: 26px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    margin-bottom: 16px;
}

.reply-thread-template .main-post--panel .timeline-date .timeline-date-wrapper span{
    font-size:13px;
}

.reply-thread-template .main-post--panel .timeline-task-title{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.reply-thread-template .main-post--panel .timeline-task-sub-title{
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #75716B;
}

.reply-thread-template .main-post--panel .timeline-task-description{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.reply-thread-template .main-post--panel .timeline-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid #C0BFBB;
    margin: 0;
}

.timeline-footer {
    color: #fff;
    margin: 10px 0;
}

.reply-thread-template .main-post--panel .timeline-reply-panel, #offcanvas-post .main-post--panel .timeline-reply-panel {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
    padding: 8px 0px;
    border-bottom: 1px solid #C0BFBB;
}

.reply-thread-template .timeline-footer-date{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #75716B;
}

.main-post--panel {
    /*padding: 0 15px;
    margin: 0 0 24px 16px;*/
}


/********************* TaskUpdate *****************/
.taskupdate--panel{
    position: relative;
}
.taskupdate--panel .cta-updates-done-container{
    position: relative;
    
}

.taskupdate--panel .cta-updates-done-container a{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    text-decoration: none;
}

.taskupdate--panel .flag-update--btn,.taskupdate--panel .flag-update--btn:hover,
.task-drawer-taskupdate--panel .flag-update--btn,.task-drawer-taskupdate--panel .flag-update--btn:hover{
    border: 1px solid #fff;
    position: absolute;
    right:  24px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 0 10px;
    font-size: 14px;
    text-decoration: none;
}

.taskupdate--panel .flag-update--btn i,
.task-drawer-taskupdate--panel .flag-update--btn i{
    position: relative;
    top: 2px;
}

#offcanvas-post .taskupdate--panel .timeline-media-details .feed-media-container.document{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 88%;
}

#offcanvas-post .taskupdate--panel .feed-media-container.document .feed-media-wrapper,
#offcanvas-post .feeds--item.task--item .feed-media-container.document .feed-media-wrapper{
    padding-left: 0;
    padding-right: 0;
}

.taskdrawer-taskupdate--images-container .thumbnail--overlay{
    font-family: 'Platform Bold', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}

.taskdrawer-taskupdate--images-container .thumbnail--overlay div{
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.taskdrawer-taskupdate--images-container .thumbnail--overlay span{
  font-size:35px;
  vertical-align: middle;
}

.task-drawer-taskupdate--panel .taskimage-uploaded.video i{
    position: absolute;
    top: 50%;
    display: inline-width;
    width: 30px;
    height: 30px;
    left: 50%;
    text-align: center;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: rgba(255, 210, 0, 0.7);
    line-height: 30px;
    margin: -15px 0 0 -15px;
    font-size: 20px;
}

.taskupdate--panel{
    background: #383633;
    padding: 16px;
    color: #fff;
    font-weight: 400;
    font-size: 17px;
    -webkit-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-bottomright: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}
.taskupdate--panel.no-image{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.taskupdate--panel .taskupdate--text{
    margin-bottom: 8px;
    width: 90%;
}
.reply-task--panel .taskupdate--panel .taskupdate--text{
    width: 90%;
}
.taskupdate--panel hr{
    width:  70px;
    background: #fff;
    margin: 15px 0 15px 0;
    height: 1px;
}

.client-container .taskupdate--panel{
  padding: 24px;
}

.client-container .taskupdate--panel .taskupdate--text{
  min-height: 24px;
}

.task-drawer-taskupdate--panel{
  position: relative;
  background: #383633;
  padding: 16px;
  color: #fff;
  font-weight: 400;
  font-size: 17px;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
}

.flag--item .task-drawer-taskupdate--panel{
    border:1px solid #dc4f5a;
}

.updates-done--panel{
    padding-top:15px;
    padding-bottom: 15px;
}
.feeds--item.system--item .updates-done--panel{
    padding: 0;
}
.sub-task-card.parent-taskonly .updates-done--panel{
    padding-top:0px;
    /*padding-bottom: 0px;*/
}

.task-drawer--taskupdate-tab-container{
  margin-bottom:15px;
}

.task-updates--tab-content[data-tab="internal"]{
  display:initial;
}

.task-updates--tab-content{
  display:none;
}

.task-drawer--taskupdate-tab{
  font-size:14px;
  position:relative;
}

.task-drawer--taskupdate-tab i,
.push-client-update2 i{
  margin-right:5px;
  font-size:18px;
  vertical-align: middle;
}

.task-drawer--taskupdate-tab:hover{
  text-decoration:none;
  color:#FFF;
}

.task-drawer--taskupdate-tab.active{
  width:100%;
  display:inline-block;
  padding-bottom:10px;
}

.task-drawer--taskupdate-tab.active:after{
  content:"";
  height:2px;
  width:100%;
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  display:inline-block;
  background:#EFAC00;
  border-radius:10px;
}

.taskupdate--completedBy,
.subtask--listing p.taskupdate--completedBy,
.parentTask--listing p.taskupdate--completedBy{
  font-family: "DM Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  color:#FFF;
  margin-bottom:4px;
}

.taskupdate--remark,
.subtask--listing p.taskupdate--remark,
.parentTask--listing p.taskupdate--remark{
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.taskdrawer-taskupdate--images-container{
  margin-bottom:40px;
}

.taskdrawer-taskupdate--images-container a.taskimage-uploaded,
.taskdrawer-taskupdate--images-container a.taskimage-uploaded--item{
  width: 90px;
  height:90px;
  margin-right:2.5%;
  padding-top: initial;
  border: 1px solid #E5E5E1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.taskdrawer-taskupdate--images-container a.taskimage-uploaded--item .taskimage-uploaded{
  width:100%;
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.taskdrawer-taskupdate--images-container a.taskimage-uploaded:last-child{
  margin-right:0;
}

.taskimage--overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    padding-top: 25px;
    cursor: pointer;
}

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


.task-drawer-task-updates--bottom-section{
    margin-top: 44px;
}
.task-drawer-task-updates--bottom-section .task-updates--time-status{
  font-size:12px;
}

.task-drawer-task-updates--bottom-section .flag-update--btn,
.task-drawer-task-updates--bottom-section .edit-push-options2--btn,
.task-drawer-task-updates--bottom-section .flag-update--btn:hover,
.task-drawer-task-updates--bottom-section .edit-push-options2--btn:hover,
.task-drawer-task-updates--bottom-section .rounded-icon--btn,
.task-drawer-task-updates--bottom-section .rounded-icon--btn:hover{
  right:initial;
  bottom:initial;
  top:initial;
  left:initial;
  position:relative;
  display:inline-block;
  vertical-align: middle;
}

.task-drawer-task-updates--bottom-section .flag-update--btn{
  margin-right:5px;
}

.task-drawer-task-updates--bottom-section .task-updates--cta-container{
  margin-top:-10px;
  text-align:right;
}

.taskpdf--listing{
    margin: 20px 0 !important;
    list-style: none;
    padding-left: 0;
}

.subtask--listing li:first-child, .parentTask--listing li:first-child {
    border-top: 0;
    top: 0;
}

.subtask--listing.view li {
    border-top: 0px !important;
}

.subtask--listing li:first-child, .parentTask--listing li:first-child {
    border-top: 0;
    top: 0;
}
.taskpdf--listing li {
    padding: 0;
    border-top: 0 !important;
}
.taskpdf--listing li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.subtask--listing li, .parentTask--listing li {
    position: relative;
    padding: 20px 0;
    border-top: 1px solid #C0BFBB;
}
.subtask--listing li, .parentTask--listing li {
    position: relative;
    padding: 20px 0;
    border-top: 1px solid #C0BFBB;
}

.task-drawer-taskupdate--panel .taskpdf-uploaded {
    width: 100%;
}

.taskpdf-uploaded,.taskpdf-uploaded:hover,.taskpdf-uploaded:active {
    border: 1px solid #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    padding: 10px 10px 10px 40px;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.cost-taskpdf-uploaded,.cost-taskpdf-uploaded:hover,.cost-taskpdf-uploaded:active {
    border: 1px solid #000000 !important;
    color: #000;
}

.taskpdf-uploaded:hover{
    color:#FFF;
}
.cost-taskpdf-uploaded:hover{
    color:#000000;
}

.taskpdf-uploaded i {
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -7px;
    color: #FFD200;
    font-size: 18px;
}

.document-item i {
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -7px;
    color: #000000;
    font-size: 18px;
}

.multi-line-ellipsis {
    word-break: break-all;
}

.taskupdate--remark, .subtask--listing p.taskupdate--remark, .parentTask--listing p.taskupdate--remark {
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.subtask--listing .subtask--item p {
    margin-bottom: 16px;
}
.subtask--listing .subtask--item p, .parentTask--listing .subtask--item p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 23px;
}

.task-drawer-taskupdate--panel .dropbox--text,.task-drawer-taskupdate--panel .extra-info--panel{
  margin-top:0;
  margin-bottom:16px;
}

.dropbox--text{
  border: 1px solid #fff; padding: 10px; word-break: break-all; line-height: 20px; margin-top: 40px; border-radius: 12px;
}
.extra-info--panel{
    border: 1px solid #fff; 
    padding: 10px; 
    word-break: break-all; 
    line-height: 20px; 
    margin-top: 40px; 
    border-radius: 12px;
}

/*
    task module dashboard
*/
.alert-loading{
    position:absolute;
    top:100px;
    left:50%;
    transform:translateX(-50%);
}

.alert-listing-end,
.tasks-listing-end,
.project-listing-end,
.workplace-listing-end{
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
}
.tasks-listing-end{
    margin-top: 16px;
}

.workplace-listing-all--loadmore,.project-listing-all--loadmore,.tasks-listing-all--loadmore{
    text-align:center;
    padding: 20px;
    font-size: 14px;
}


.magnific-asset--item{
    cursor: pointer;
}


/*login page starts*/
/* .login-page .form-control{ // Unused CSS - Nisha
    background: none;
} */
/* .login-page input[type=submit]{
    display: block;
    width: 100%;
} */
.login-page .form-group,.forget-password--form .form-group{
    position: relative;
    border-radius: 0;
}
.login-page input[type=text],.login-page input[type=password],
.login-page input[type=text]:focus,.login-page input[type=password]:focus,
.login-page input[type=text]:active,.login-page input[type=password]:active,
.login-page input[type=text]:hover,.login-page input[type=password]:hover{
    color: #fff;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
}
.login-page .input-icon{
    bottom: -5px;
}
.login-page input[type=text].error,.login-page input[type=password].error,
.login-page input[type=text].error:focus,.login-page input[type=password].error:focus,
.login-page input[type=text].error:active,.login-page input[type=password].error:active,
.login-page input[type=text].error:hover,.login-page input[type=password].error:hover{
    border-color: #EE4056;
}

.login-page input:is(:-webkit-autofill, :autofill),
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover, 
.login-page input:-webkit-autofill:focus { 
    border-bottom: 1px solid #fff;
    background: none;
    -webkit-box-shadow: 0 0 0 30px #000 inset !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border-radius: 0;

}
.btn-login-again2,.btn-login-again2:hover,.btn-login-again2:focus,
.btn-login-again,.btn-login-again:hover,.btn-login-again:focus,
.btn-forgot-password,.btn-forgot-password:hover,.btn-forgot-password:focus,
.btn-reset-password,.btn-reset-password:hover,.btn-reset-password:focus{
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    line-height: 42px;

    background-color: transparent;
    border: 1px solid white;
    border-radius: 25px;
    text-align: center;
}
/* .btn-login{ //Redundant CSS - Nisha
    margin-top: 40px;
}*/
.btn-forgot-password,.btn-login-again{
    margin-top: 15px;
}

.btn-login-again2{
    background-color: #ffd200;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    padding: 0;
}

.forget-password--form{
    display: none;
    padding-top: 50px;
}


.login-page input[type=submit]{
    background-color: #ffd200;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    width: 100%;
    margin-top: 20px;
}


.reset-success--panel{
    display: none;
    color: #ffffff;
    font-size: 17px;
    line-height: 20px;
    padding-top: 50px;
}

#login-again-btn2{
    margin-top: 50px;
}

.dropdown-toggle:after{
    display:none;
}

.display-hidden {
    display: none !important;
}

.filter-switch--pill{
    background: #F5F5F5;   
    padding: 3px;
}

.filter-switch--pill .nav-item.active{
    background: #ffffff;
    color: #FFD200;

}

.filter-switch--pill .nav-item{
    border-radius: 6px;
    text-decoration: none;
    color: #000;
    line-height: 30px;
    font-size: 14px;
}

#viewTaskModuleContent .nav.nav-pills.nav-fill{
    border-bottom: 1px solid #000;

}

#viewTaskModuleContent .nav.nav-pills.nav-fill a{
    text-decoration: none;
    line-height: 40px;
    color: #75716B;
    font-size: 14px;
}

#viewTaskModuleContent .nav.nav-pills.nav-fill a.active{
    border-bottom: 2px solid #FFD200;
    color: #000;
    font-weight: bold;
}

.task-filter--no{
/*    display: none;*/
}
.task-listing-count--panel{
    color: #75716B;
    margin: 16px 0 8px 0;
    font-style: italic;
    font-size: 14px;
}


#workplace-feed-filter-modal .input-container.flex {
    display: flex;
}

#workplace-feed-filter-modal .input-container {
    padding-left: 0;
/*    padding-right: 30px;*/
    display: block;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#workplace-feed-filter-modal ul li {
    border-bottom: 1px solid #C0BFBB;
    padding: 10px 0;
}

#workplace-feed-filter-modal ul {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

#workplace-feed-filter-modal ul li a {
    text-decoration: none;
    display: block;
    padding: 0;
}

#offcanvas-feed-filter .input-container, #offcanvas-feed-category .input-container {
    font-size: 19px;
    line-height: 21px;
}

.input-container input,.input-container2 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

#offcanvas-feed-filter .input-container img, #offcanvas-feed-category .input-container img {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.dropdown-menu.pma-dropdown-menu .filter-timeline i, #offcanvas-feed-filter .filter-timeline i {
    position: absolute;
    left: 5px;
    top: 14px;
}

.filter-timeline i {
    display: none;
}

.input-container input:checked+label {
    background: #EFAC00;
}
.input-container label {
    cursor: pointer;
    text-indent: -9999px;
    width: 56px;
    height: 32px;
    background: #75716B;
    display: block;
    border-radius: 100px;
    position: relative;
    margin: 0;
}

.input-container input:checked+label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.input-container label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s cubic-bezier(0.09, 0.7, 0.41, 1.35);
}


.project-card {
    /*border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/

    border: 1px solid #C0BFBB; 
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
}

.project-card:last-child{
    margin-bottom: 40px;
}
.project-card.project-nearing--status{
    background: #FFFAE9;
    border-color: #F16321;
}

.project-card.project-overdue--status{
    background: #FFF4F4;
    border-color: #EE4056;
}
.project-card.project-nearing--status .circular-loader::before {
    background: #FFFAE9;
}
.project-card.project-overdue--status .circular-loader::before {
    background: #fff4f4;
}





.project-card.project-nearing--status .date-circular--style1{
    border-width: 1px;
    border-style: solid;
    border-radius: 500px;
    padding: 4px 8px;
    font-weight: 600;
}

.project-card.project-overdue--status .date-circular--style1{
    border-width: 1px;
    border-style: solid;
    border-radius: 500px;
    padding: 4px 8px;
    font-weight: 600;
}


.project-card.project-nearing--status .date-circular--style1{
    border-color: #F16321;
    color: #F16321;
}

.project-card.project-overdue--status .date-circular--style1{
    border-color: #EE4056;
    color: #EE4056;
}

.project-card.project-nearing--status .upcoming-date-icon path{
    stroke: #F16321
}
.project-card.project-overdue--status .upcoming-date-icon path{
    stroke: #EE4056
}




.project-card h5 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-details {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.5;
}


.project-card-body{
    padding: 0;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.completed-task-tabs .nav-pills .nav-link{
    color: #fff;
    font-weight: 400;
}
.completed-task-tabs .nav-pills .nav-link.active {
    background-color: #383633;
    border-bottom: 1px solid #ffc107;
    color: #fff;
    font-weight: 600;
    border-radius: 0;
}

@media only screen and (max-width: 400px) {
    /*.taskimage-uploaded--item{
        padding-top: 97%;
        
    }*/
    .completed-task-tabs{
        padding: 10px 10px 24px 10px;
    }
    .sub-task-card.white-card{
        padding: 24px 10px;
    }
}

.nav-tabs .nav-link.active {
    color: #ffc107;
    border: none;
    border-bottom: 3px solid #ffc107;
    font-weight: bold;
}

.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    font-size: 16px;
}

.nav-tabs {
    border-bottom: none;
}

.section-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

#viewTabs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.milestone-name-details{
    color: #000;
    font-weight: 600;
    font-size: 20px;
}

#project-view-task-modal-2 .modal-body{
    background: #F5F5F5;
}


#project-view-task-modal .modal-body{
    padding:0;
}

.project-view{
    padding: 0;
    background: #F5F5F5;
    position: relative;
}

.task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    margin: 0.5rem 0;
    background-color: #fff7f7;
    border: 1px solid #ffe0e0;
    border-radius: 8px;
}

.task-card--item {
    display: flex;
    align-items: center;
    justify-content: space-between;
/*    padding: 1rem;*/
    padding: 1rem 24px;
    margin: 0;
    /*background-color: #fff7f7;
    border: 1px solid #ffe0e0;*/
    border: 1px solid #e5e5e1;
    border-bottom: none;
    cursor: pointer;
    background: #fff;
}

.task-card--item.overdue,.task-card--item.flagged{
    background: #FFF4F4;
}

.task-card--item.dueSoon{
    background: #FFFAE9;
}

.task-card--item .task-name{
    margin-top: 10px;
    margin-bottom:0px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.task-card--item .task-meta span{
    display: inline-block;
    margin-right: 10px;
}
.task-card--item .task-meta span:first-child{
    /* margin-left: 0; */
}


.task-icon{
    width: 24px;
}
.task-card--item .date-circular--style1{
    font-size: 12px;
}

.task-date span {
    background-color: #ffe5e5;
    color: #ff4d4d;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.task-details {
    flex: 1;
    margin-left: 1rem;
}

.task-details h5 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
}

.task-details p {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 0.5rem;
}

.task-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

.task-stats li {
    font-size: 0.8rem;
    color: #666;
}

.task-actions .btn {
    background-color: #ffcccb;
    color: #ff4d4d;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
}

.task-actions .btn i {
    font-size: 1.2rem;
}

/* Milestone header styles */
/* Stage Label with Circle */

.stage-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    
    background: #fff;
    padding: 10px 0 10px 24px ;
    margin-top: 15px;
    position: sticky; 
    top: 0; 
    z-index: 10
}


#workplace-projecttasks-modal .stage-label{
    top: 44px;
}

.stage-section:first-child .milestone-section{
    margin-top: 0;
}
.stage-section:first-child .stage-label{
    margin-top: 0;
}

.stage-label .circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.stage-text {
    color: #75716B;
}

/* Milestone Week in Gray */
.milestone-week {
    color: gray;
    font-size: 14px;
    margin-top: 5px;
}

.completed-milestone--panel{
    background: #00B485;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    padding: 4px 16px;
    line-height: 18px;
    border-radius: 14px;
    
}


.milestone-status--panel{
    margin-right: 10px;
}
.milestone-meta{
    display: flex; 
    align-items: center; 
    gap: 5px;
}

.milestone-meta{
    color: #EFAC00;
}

.milestone-section .milestone-meta svg path{
    fill: #75716B;
    stroke: #75716B;
}

.milestone-section.completed .milestone-meta{
    fill: #75716B;
}

.milestone-section .milestone-meta:not(.shown) svg{
    transform: rotate(180deg);
    position: relative;
    top: -1px;
}
.milestone-section .milestone-meta.shown svg{
    transform: rotate(0deg);
    position: relative;
    top: -3px;
}
.milestone-section .milestone-meta.shown svg path{
    fill: #EFAC00;
    stroke: #EFAC00;
}

.milestone-section .milestone-meta .task-count{
    color: #75716B;
}
.milestone-section .milestone-meta.shown .task-count{
    color: #EFAC00;
}

/*#75716B*/
/* Milestone Name and Accordion */
.milestone-section{
    margin-top: 10px;
}

.milestone-section.completed .task-list{
    display: none;
}
.milestone-header{
    background: #F5F5F5;
}
.milestone-name--panel{
/*    background-color: #f0f0f0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;*/
    padding: 8px 24px;
    
    margin-top: 0;
    font-size: 16px;
    font-weight: bold;
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.milestone-name {
    
}

.milestone-name:hover {
    cursor: pointer;
}

.milestone-name .accordion-arrow {
    font-size: 18px;
}

.milestone-name .task-count {
    font-size: 14px;
    color: inherit;
}

/* Accordion tasks section */
.task-list {
    margin-top: 0;
    border-bottom: 1px solid #e5e5e1
/*        display: none;*/
    /* Hidden by default for the collapse effect */
}

.task-list.show {
    display: block;
}

/* Task Cards */
.task-card {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.task-card h5 {
    margin-bottom: 5px;
    font-size: 18px;
}

.task-card p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

.task-card:hover {
    background-color: #e0e0e0;
    /* Light hover effect */
}

    .progress-circle {
    width: 60px;
    height: 60px;
    margin-right: 16px;
    position: relative;
}
.circle-outer {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #e0e0e0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.circle-inner {
    width: 100%;
    height: 100%;
    background-color: #f5c6cb;
    position: absolute;
    clip-path: inset(calc(100% - var(--completion, 0)) 0 0 0);
    border-radius: 50%;
    transform: rotate(-90deg); /* Ensures the progress starts from the top */
}
.task-count {
    position: relative;
    font-size: 12px;
    font-weight: bold;
    color: inherit;
}

.task-flagged-icon {
    color: #d9534f !important; /* Red for flagged tasks */
    font-size: 18px;
    margin-left: 8px;
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.project-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.card-body {
    display: flex;
    align-items: center;
}

.project-card{
    font-family: 'DM Sans', sans-serif;
}
.project-card .project-name{
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
    word-break: break-all;

}

.project-card .project-task-completion-progress{
    font-size: 14px;
    line-height: 18px;
}

.project-card .project-task-completion-progress span{
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.project-card .owner-name{
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}
.project-card .upcoming-date-panel{
    margin-top: 5px;
    
}
.upcoming-date-txt{
    font-size: 12px;
    font-weight: 600;
}
.upcoming-date-panel .upcoming-date{
    font-size: 12px;
}

.upcoming-date-panel .date-circular--style1{
    padding: 4px 10px !important;
}
.project-card .upcoming-date{
    display: inline-block;
}

.nodate{
    color: #EE4056 !important;
    border: 1px solid #EE4056 !important;
}

.project-card-arrow{
    position: absolute;
    top: 0px;
    right: 20px;
    color: #333333;
    font-size: 32px;
}

.project-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 16px;
    padding-right: 20px;
}
.project-info p {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 0;
    color: #555;
}
.project-info i {
    margin-right: 8px;
    color: #666;
}

/*.project-card:hover {
    background-color: #fce4ec; 
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}*/

.circular-loader-container {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    margin-right: 0px;
    text-align: center;
}

.circular-loader {
    width: 100%;
    height: 100%;
    background: conic-gradient(
        #ffd000 calc(var(--progress) * 1%), 
        #76716a calc(var(--progress) * 1%)
    );
    border-radius: 50%;
    position: relative;
}

.circular-loader::before {
    content: '';
    position: absolute;
    top: 10px; /* Adjust for hollow center */
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #fff; /* Matches card background */
    border-radius: 50%;
    z-index: 1;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: #333;
    z-index: 2;
}


/* .posts-page--search-cta-container{ // Unused CSS - Nisha
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
*/

.posts-page--search-cta .search-icon{
    height: 25px;
    width: 25px;
    /* margin-right:20px; Use bootstrap CSS instead - Nisha */
}

/* .posts-page--search-filter-cta{ // Unused CSS - Nisha
    width:25px;
    height:22px;
}*/

.posts-page--search-filter-cta{
    margin-right:15px;
    margin-bottom:5px;
    position:relative;
}

.posts-page--search-cta, .posts-page--search-filter-cta{
    cursor:pointer;
}

.posts-page--search-filter-cta i{
    color:#000;
    font-size:22px;
    vertical-align: middle;
    display:inline-block;
    margin-top:-5px;
}

.posts-page--search-filter-cta .badge {
    width: 10px;
    height: 10px;
    right: 0px;
    top: 1px;
    position: absolute;
    left: initial;
    border: 1px solid #FFF;
}

/*
.search-filtering-panel{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
    display:none;
}*/

.workplace-name{
    width:100%;
    margin-bottom:4px;
}

.workplace-name h5{
     /* font-family: 'DM Sans', sans-serif; */
    font-weight:700;
    /* font-size:16px; Updated to follow figma - Nisha */
    /* line-height:20px; */
}

.workplace-owner{
    font-size: 0.9rem;
    margin-bottom:8px;
}

.workplace-owner img{
    padding-right:8px;
    display:inline-block;
    vertical-align: middle;
}

.workplace-owner span{
    display:inline-block;
    vertical-align: middle;
}

.workplace-arrow-icon{
    margin-bottom:35px
}

#workplace-list-filter-modal .modal-header{
    border-bottom:0;
}

#workplace-list-filter-modal .search-filtering-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
}

#workplace-list-filter-modal .search-filtering-wrapper .search-filtering-detail {
    display: flex;
    align-items: center;
}

#workplace-list-filter-modal .search-filtering-panel .input-container {
    margin: 0;
    padding: 0;
}

#workplace-list-filter-modal .search-filtering-wrapper .search-filtering-detail .label-text {
    /* font-family: "DM Sans"; // Redundant CSS - Nisha
    font-size: 19px; */
    /* font-style: normal;
    font-weight: 400; */
    color:#75716B;
    transition:0.1s ease-in-out;
}



/* #workplace-list-filter-modal h2{ // Use bootstrap css instead - Nisha
    border-bottom:none;
    padding-bottom:30px;
    font-family: 'Platform Bold';
}*/

#workplace-list-filter-modal .search-filtering-wrapper .search-filtering-detail i{
    font-size:22px;
    margin-right:16px;
    transition:0.3s ease;
}

#workplace-list-filter-modal .search-filtering-wrapper:last-child{
    margin-bottom:50px;
}

#workplace-list-filter-modal .modal-header .btn{
    border:none;
}

.workplace-list-filter-reset:hover{
/*.workplace-list-filter-reset:active:focus, .workplace-list-filter-reset:active, .workplace-list-filter-reset:focus-visible, .workplace-list-filter-reset:active:focus-visible{*/
    background:transparent !important;
    color:#000 !important;
}

.workplace-list-filter-reset:active{
    background:#75716B !important;
    color:#FFF !important;
}

.search-filtering-wrapper:not(.isChecked) i{
    color:#75716B !important;
}


/*main navigations*/
.menubar-cta{
    position: relative;
    display: block;
    padding: 5px 0 0px 0;
    border-top: 2px solid #000;
    width: 70%;
    margin: 0 auto;
}


.menubar-cta[data-tab='workplace-tab'].active svg path{
    fill: #000;
    stroke: none;
}

.menubar-cta[data-tab='workplace-tab'].active svg path:first-child{
    fill: #FFD200;
    stroke: none;
}

.menubar-cta[data-tab='task-tab'].active svg path{
    fill: #FFD200;
    stroke: none;
}

.menubar-cta[data-tab='alert-tab'].active svg path{
    fill: #FFD200;
    stroke: none;
}

.menubar-cta[data-tab='profile-tab'].active svg path{
    fill: #FFD200;
    stroke: none;
}

.menubar-cta[data-tab='task-tab'].active svg path{
    fill: #FFD200;
    stroke: #000;
}

.menubar-cta[data-tab='alert-tab'].active svg path{
    fill: #FFD200;
    stroke: #000;
}

.menubar-cta[data-tab='profile-tab'].active svg path{
    fill: #FFD200;
    stroke: #000;
}

.menubar-cta .badge{
    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    top: 8px;
    left: initial;
    right:12px;
    border:1px solid #000;
}
.menubar-cta,.menubar-cta:hover {
    text-decoration: none;
    color: #FFF;
}

.menubar-cta label{
    display: block;
    font-size: 11px;
    margin-top: 5px;
    cursor: pointer;
    display: none;
}
.menubar-cta svg{
    width: 26px;
    height: 26px;

}
.menubar-cta.active{
    border-top: 2px solid #FFD200;

}
.menubar-cta.active svg path{
    /* stroke: #FFD200 */
}

.menubar-cta.active label{
    color: #FFD200;

}
.menubar--container{
    position: absolute;
    height: 76px;
    bottom: 0;
    width: 100%;
}
.menubar--content {
    position: fixed;
    max-width: 640px;
    width: 100%;
    /*padding: 10px 0 32px;*/
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #FFF;
    z-index: 1200;
/*    height: 76px;*/
}

.menubar--bg-overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    background:rgba(0,0,0,0.5);
    display:none;
}

.menubar--hamburger-cta{
    position:absolute;
    top:-15px;
    left:50%;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#f8d447;
    transform:translateX(-50%);
    z-index: 10;
}

.menubar--hamburger-cta svg{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.menubar--before-expand{
    width:100%;
    height:100%;
    display: table;
    position: relative;
    background:#000;
    z-index: 2;
    padding: 14px 0 32px;
}

.menubar--main-cta{
    width:20%;
    display:table-cell;
    text-align: center;
}

.menubar--after-expand{
    width:100%;
    min-height:320px;
    height:auto;
    position:absolute;
    bottom:100%;
    left:0;
    background:#383633;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    
    z-index: 1;

    transform:translateY(100%);
    -webkit-transform:translateY(100%);
    -moz-transform:translateY(100%);

    opacity:0;

    transition:0.3s transform ease-in-out, opacity 0.3s ease-in-out;
    /*-webkit-transition:0.3s ease-in-out;*/
    /*-moz-transition:0.3s ease-in-out;*/
}

.menubar--container.active .menubar--after-expand{
    transform:translateY(0%);
    opacity:1;
}

.menubar--container.active .menubar--before-expand a{
    visibility: hidden;
    pointer-events: none;
}

.menubar--container.active .menubar--bg-overlay{
    display:block;
}

.menubar--after-expand>ul{
    margin:0;
    padding:24px;
}

.menubar--sub-nav>ul{
    padding-top:24px;
    margin:0;
}

.menubar--after-expand>ul>li {
    list-style: none;
    display:inline-block;
    width:30%;
    text-align: center;
    margin:0 1.6%;
    padding:0 0 24px;
}
.menubar--after-expand>ul>li .menubar-cta,
.menubar--after-expand>ul>li .menubar-cta.active{
    border:initial;
}

.menubar--after-expand>ul>li .menubar-cta label{
    display: block;
    font-size:14px;
    font-weight:700;
    line-height:18px;
    padding-top:5px;
}

.menubar--after-expand>ul>li .menubar-cta{
    position: initial;
}

.menubar--sub-nav{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#383633;
    text-align: left;
    padding:24px;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.menubar--sub-nav ul{
    list-style: none;
}

.menubar--sub-nav-top{
    display: inline-block;
    cursor:pointer;
}

.menubar--sub-nav-top *{
    display:inline-block;
    vertical-align: middle;
}

.menubar--sub-nav-top svg{
    margin-right:10px;
}

.menubar--sub-nav li{
    text-align: center;
    display:block;
    padding:0px;
    margin-bottom:16px;
    border-radius:6px;
    font-weight:700;
    /*background: #FFD200;*/
}

.menubar--sub-nav li a{
    padding: 16px;
    display: block;
    max-width:90%;
    margin:0 auto;
}
.menubar--sub-nav li a:hover{
    text-decoration: none;
    background:#FFD200;
    border-radius:6px;
    color:#000;
}

.hamburger-menu {
    width: 20px;
    height: 2px;
    display:block;

    position: absolute;
    background: #000;

    top:50%;
    left:50%;
    
    transform: translate(-50%,-50%);
    
    transition: 0.15s ease-in-out;
    -webkit-transition: 0.15s ease-in-out;
    -moz-transition: 0.15s ease-in-out;
    
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

.hamburger-menu:before {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    left: 0;
    top: -8px;
    background: #000;

    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), top 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), top 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), top 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1);
    
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

.hamburger-menu:after {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
    background: #000;
    transform: rotate(0deg);

    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), bottom 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), bottom 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), bottom 300ms 100ms cubic-bezier(0.23, 1, 0.32, 1);
    
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

.menubar--container.active .hamburger-menu {
    background: rgba(247,223,113,0);
}

.menubar--container.active .hamburger-menu:before {
    width:20px;
    top: 0;

    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);

    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 150ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 150ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menubar--container.active .hamburger-menu:after {
    width: 20px;
    bottom: 0;
    
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);

    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 150ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 150ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 150ms cubic-bezier(0.23, 1, 0.32, 1);
}


.hide{
    display: none !important;
}


/*date ui*/
.date-circular--style1{
    border-width: 1px;
    border-style: solid;
    border-radius: 500px;
    padding: 4px 16px;
    font-weight: 600;
    display: inline-block;
    border-color: #C0BFBB;
    color: #75716B;
}

.date-circular--style1.nearing,.date-circular--style1.dueSoon{
    border-color: #F16321;
    color: #F16321;
}

.date-circular--style1.incomplete{
    /*border-color: #F16321;
    color: #F16321;*/
}

.date-circular--style1.overdue,.date-circular--style1.flagged{
    border-color: #EE4056;
    color: #EE4056;
}

.date-circular--style1.completed{

    font-weight: 400;
    color: #75716B;
    background: #E5E5E1;
    border-color: #E5E5E1;
}


.task-header .date-circular--style1.completed,.sub-task-body .date-circular--style1.completed, .main-post--panel .date-circular--style1.completed{
    background: #00B485;
    border-color: #00B485;
    color: #fff;
    font-weight: 600;

}

.task-header .date-circular--style1.flagged,.sub-task-body .date-circular--style1.flagged, .main-post--panel .date-circular--style1.flagged{
    background: #FCDEDF;
    border-color: #FCDEDF;
    color: #EE4056;
    font-weight: 600;
}

.task-header .date-circular--style1,.sub-task-body .date-circular--style1, .main-post--panel .date-circular--style1{
    font-size: 14px;
}



.flag-remarks{
    background: #FFF4F4;
    border:1px solid #EE4056;
    border-radius: 8px;
    margin-top: 24px;
    padding: 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #EE4056;
    margin-bottom: 20px;
}

.flag-remarks h6{
    padding: 0;
    color: #EE4056;
    margin: 0 0 8px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.resolve-btn{
    margin-top: 24px;
}





/*modal*/
.modal input[type=button].btn-secondary,.modal input[type=button].btn-secondary:hover,.modal button[type=button].btn-secondary,.modal button[type=button].btn-secondary:hover,.btn-secondary,.btn-secondary:hover,.btn-secondary:focus{
    background: #fff;
    color: #000;
    line-height: 48px;
    min-width:  160px;
    border-radius: 500px;
    border: 1px solid #000;
    font-weight: 600;
    font-size: 16px;
    box-shadow: none;
    text-decoration: none;
    /* padding: 0 24px; */ /* commented because this make the button to be not the same since as submit revert this code back if any issue elsewhere */
    padding: 0;
}
.modal input[type=submit].btn-primary,.modal input[type=submit].btn-primary:hover,.modal input[type=submit].btn-primary:focus,.modal button[type=submit].btn-primary,.modal button[type=submit].btn-primary:hover,.modal button[type=submit].btn-primary:focus{
    background: #FFD200;
    color: #000;
    line-height: 48px;
    min-width:  160px;
    border-radius: 500px;
    border: 1px solid #FFD200;
    font-weight: 600;
    font-size: 16px;
    box-shadow: none;
    padding-top:0;
    padding-bottom:0;
}

.modal .delete-task-confirm--btn:hover, .modal .delete-task-confirm--btn:focus{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}
.modal .delete-task-confirm--btn{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}

.modal .exit-edit-confirm--btn:hover, .modal .exit-edit-confirm--btn:focus{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}
.modal .exit-edit-confirm--btn{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}

@media only screen and (max-width: 400px) {
    .modal input[type=button].btn-secondary,.modal input[type=button].btn-secondary:hover,.modal button[type=button].btn-secondary,.modal button[type=button].btn-secondary:hover{
        min-width:  140px;
    }
    .modal input[type=submit].btn-primary,.modal input[type=submit].btn-primary:hover,.modal button[type=submit].btn-primary,.modal button[type=submit].btn-primary:hover{
        min-width:  140px;
        
    }

}

input[type=submit].btn-primary,
input[type=submit].btn-primary:hover,
input[type=submit].btn-primary:focus,
button[type=button].btn-primary,
button[type=button].btn-primary:hover,
button[type=button].btn-primary:focus{
    background: #FFD200;
    color: #000;
    line-height: 48px;
    min-width:  173px;
    border-radius: 500px;
    border: 1px solid #FFD200;
    font-weight: 600;
    padding: 0 24px;
    font-size: 16px;
    outline: none;
    box-shadow: none;
}


.input-container,.input-container2 {
    display: inline-block;
    position: relative;
/*    padding-left: 30px;*/
/*    margin-bottom: 12px;*/
    cursor: pointer;
    font-size: 16px;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-top: 3px;
}

.input-container{
    padding-left: 30px;
/*    margin-bottom: 12px;*/
}

.feeds-category--form .input-container{
    padding-left:0;
}

.radiomark {
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 26px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    border: 2px solid #C0BFBB;
}


.specialcheckbox.disabled,.specialcheckbox.disabled:hover{
    cursor: auto;
}
.specialcheckbox input:checked~.radiomark{
    background-color: #FFD200;
    border-color: #000;
}
.specialcheckbox input:disabled~.radiomark{
    opacity: 0.5;
}

.specialcheckbox .disabled,
.specialcheckbox.disabled{
    opacity: 0.5;
}
.checkmark:after, .specialcheckbox .radiomark:after{
    left: 7px;
    top: 2px;
    width: 8px;
    height: 14px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

}

.apply-this-to-all--btn.disabled{
    display:none;
}

.input-container2 .radiomark{
    left: auto;
    position: absolute;
    right: -10px;
    top: -10px;
    height: 26px;
    width: 26px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    border: 2px solid #C0BFBB;
    background: white;
}
.taskimage-uploaded--wrapper .input-container,.taskimage-uploaded--wrapper .input-container2{
    width: 100%;
    position: absolute;
}

/*.input-container input:checked~.checkmark:after,*/
.input-container2 input:checked~.radiomark:after {
    display: block;

}
.input-container2 input:checked~.radiomark{
    background: #FFD200;
    border-color: #000    
}


.input-container .radiomark:after,
.input-container2 .radiomark:after {
    left: 7px;
    top: 2px;
    width: 8px;
    height: 14px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


input:checked~.checkmark:after, input:checked~.radiomark:after{
    content: " ";
    position: absolute;
/*    display: none;*/
}


.specialtype-logic--item{
    display: none;
}

/*task automation ui starts*/
.automation-action--item{
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    border: 1px solid #C0BFBB;
    padding: 16px;
}

.automation-action--item [class*=col-]{
    padding: 0 10px;
}

.countdown-push-client-card.border{
    /*border: 1px solid #C0BFBB;*/
}

.countdown-push-client-card i{
    margin: 0 10px 0 10px;
    font-size: 20px;
    transform: scaleX(-1);
}

.countdown-push-client-logo{
    left: 0;
    top: 20px;
    margin: 0;
    text-decoration: none;
    background: #FFD200;
    position: relative;
    top: 5px;

    display: block;
    margin: 0 10px 0 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 2;
}

.countdown-push-client-text-wrapper{
    flex: 1;
    padding: 15px 0 0 0

}

.countdown-push-client-text-wrapper label{
    margin-bottom: 0;
}

.auto-publish-timer--txt{
    font-size: 14px;
    line-height: 18px;
}

.countdownUL{
  padding: 0;
  list-style-type: none;
  /*white-space:nowrap;*/
  margin: 0;
  line-height: 18px;
}

.countdownUL > li {
  display: inline-block;
  list-style-type: none;
  margin-right: 4px;
    /*padding-top: 5px;*/
    border-top: none !important;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 0
    /*padding-bottom: 10px;*/
}

.countdownUL > li span {
  display: block;
  font-family: "DM Sans","Arial","Sans-serif";
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}

.countdown-push-client-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    position: relative;
    /*padding: 10px 0 0 0;*/
    /*cursor: pointer;*/
}

.cancel-auto-push-client-btn, .cancel-auto-push-client-btn:hover,.cancel-auto-push-client-btn:focus{
    min-width: 30px;
    background-color: #EE4056;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    text-decoration: none !important;
    margin-top: 15px;

}
.cancel-auto-push-client-btn[disabled],.cancel-auto-push-client-btn2[disabled]{
    opacity: 0.6;
}
.cancel-auto-push-client-btn2{
    padding: 0 24px !important;
}

.push-client-update{
    margin-top: 15px;
    width: 100%;
}

.push-client,.push-client:hover,.push-client:focus,.push-client2,.push-client2:hover,.push-client2:focus{
    background: #FFD200;
    color: #000;
    line-height: 36px;
    min-width:  30px;
    border-radius: 500px;
    border: 1px solid #FFD200;
    font-weight: 600;
    font-size: 15px;
    padding: 0;
    text-decoration: none;

}

.push-client-update2{
    width: 170px;
}

.push-client[disabled],.push-client2[disabled]{
    opacity: 0.6;
}




/* task automation ui ends*/

/*task drawer starts*/
.task-config--listing{
    list-style: none;
    margin: 0;
    padding: 0;
}



#task-add--modal .modal-content{
    background: #f5f5f5 !important


}
#task-add--modal .modal-footer,#task-edit--modal .modal-footer{
    border-top: none;
    border-radius: 30px 30px 0px 0px;
    background: #383633;

    /* Drawer Shadow */
    box-shadow: 0px -17px 29px 0px rgba(75, 54, 0, 0.07), 0px -6.205px 10.585px 0px rgba(75, 54, 0, 0.05), 0px -3.013px 5.139px 0px rgba(75, 54, 0, 0.04), 0px -1.477px 2.519px 0px rgba(75, 54, 0, 0.03), 0px -0.584px 0.996px 0px rgba(75, 54, 0, 0.02);
}

#task-add--modal .modal-footer .btn-secondary{
    border: 1px solid #fff;
    color: #fff;
    background: none;
}
.two-group-btn{
    width: 100%;
    text-align: center ;
}
.two-group-btn::after{
    content: "";
    clear: both;
}
.two-group-btn .btn{
    width: 45%;
    float: right;
}
.two-group-btn .btn:first-child{
    float: left;
}
.red-bg{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}
.two-group-btn .red-bg[disabled]{
    border: none !important;
}
/*task drawer ends*/

.task-module-filter-switch--panel-container{
    position:sticky;
    top:80px;
    transform:translateY(0);
    z-index:3;
    background:#fafafa;
    transition: transform 0.3s ease;
    overflow:hidden;
}

.task--tab-content-nav{
    position: sticky;
    top: 136px;
    transform:translateY(0);
    z-index: 2;
    background: #fafafa;
    transition:  0.3s ease;
}

.mainapp-tab.scrolldown .task-module-filter-switch--panel-container{
    transform: translateY(-70px);
}

.mainapp-tab.scrolldown .task--tab-content-nav{
    transform:translateY(-100px);
    padding-top:40px;
    transition: transform 0.3s ease padding 0.2s;
}

.task-module-filter-switch--panel{
    margin-top: 20px;
    max-width:540px;
    width:100%;
}

.task-edit--btn,.task-add--btn{
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 10px;
    right: 30px;
    text-align: center;
    line-height: 56px;
    background: #FFD200;
    border-radius: 500px;
    box-shadow: 0px 17px 34px 0px rgba(75, 54, 0, 0.12), 0px 6.205px 12.411px 0px rgba(75, 54, 0, 0.08), 0px 3.013px 6.025px 0px rgba(75, 54, 0, 0.07), 0px 1.477px 2.954px 0px rgba(75, 54, 0, 0.05), 0px 0.584px 1.168px 0px rgba(75, 54, 0, 0.04);
    z-index: 11;
}

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

.modal .btn-close{
    margin-left: 10px; 
    display: flex; 
    align-items: center;
    color: #fff;
    opacity:1;
}

.modal .modal-header{
    color: white; font-size: 1.5em;
}


/*datepicker*/
.datepicker .datepicker-switch{
    width: 200px;
}

.datepicker table tr td, .datepicker table tr th{
    width: 40px;
    height: 40px;
}


.select2-dropdown{
    z-index: 2000;
}

.select2-container{
    display: block;
}

.select2-container .select2-selection--single{
    height: 50px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 49px;
}

/*.select2-results__option--highlighted.select2-results__option--selectable{*/
.select2-results__option--selectable{
    margin-bottom: 0;
    color: #000;
}

/*.select2-container--default .select2-search--dropdown .select2-search__field{
    position: relative;
    z-index: 3000;
}*/

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 49px;
}

.select2-container--default .select2-selection--single .select2-selection__clear{
    display: none;
}

.add-special-task--panel{
    display: none;
    position: absolute; 
    width: 100%; 
    background: #fff; 
    top: 80px;
    z-index: 2;
    /*min-height: 150px;*/
    overflow-y: auto;
    box-shadow: 0px 7px 27px 0px rgba(75, 54, 0, 0.08), 0px 2.924px 11.28px 0px rgba(75, 54, 0, 0.08), 0px 1.564px 6.031px 0px rgba(75, 54, 0, 0.08), 0px 0.877px 3.381px 0px rgba(48, 34, 0, 0.08), 0px 0.466px 1.796px 0px rgba(75, 54, 0, 0.08), 0px 0.194px 0.747px 0px rgba(75, 54, 0, 0.08);
    border-radius: 6px;
}

.add-custom-special-task{
    border-bottom: 1px solid #C0BFBB;
    display: block;
    padding: 8px 16px;
    text-decoration: none;
}
.add-custom-special-task:hover,.add-custom-special-task:focus{
    text-decoration: none;
}

.add-task-special-task--item{
    cursor: pointer;
    padding: 8px 16px; 
    color: #000;
}

.close-from-new-title--btn{
    position: absolute;
    right: 10px;
    top: 35px;
    display: none;
}

.select2-selection.select2-selection--single.select2-selection--clearable.error{
    border: 1px solid red;
}

.delete-subtask--btn{
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    border-radius: 500px; 
    background: #EE4056; 
    text-align: center;
    line-height: 40px;
}

.apply-this-to-all--btn,.apply-this-to-all--btn:hover,.apply-this-to-all--btn:focus{
    color: #EFAC00;
    text-decoration: underline;
    font-weight: 600;
    display: inline-block;
    margin-top: 5px;
    font-size: 14px;

}
.task-calendar-filter{
    display: none;
    margin-right: 15px;
    margin-bottom: 6px;
}

.task-calendar-filter2{
    margin-bottom: 6px;
}
.date-filter-tasks--btn.selected svg path{
    stroke: #ffd000

}
.date-filter-tasks--btn.active:after{
    content:"";
    position: absolute;
    top: 25px;
    right: 50px;
    width: 14px;
    height: 14px;
    background:#dc4f5a;
    border:2px solid #FFF;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius:50%;
}

.calendar-shown .date-filter-tasks--btn.active:after{
    background: #dc4f5a;
    border: 2px solid #383633;
}

.display-popup-task-calendar .datepicker,.display-popup-task-calendar .datepicker table{
    width: 100%;
}
.datepicker table tr td,.display-popup-task-calendar .datepicker table tr td{
    position: relative;
}

.datepick-with-task table tr td.eventful:after,.display-popup-task-calendar .datepicker table tr td.eventful:after{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 500px;
    background: red;
    display: block;
    /*margin-left: -2.5px;*/
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
}

.datepick-with-task table tr td.eventful span.active-date.event-dot:after,.display-popup-task-calendar .datepicker table tr td.eventful span.active-date.event-dot:after{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 500px;
    background: red;
    display: block;
    /*margin-left: -2.5px;*/
    position: absolute;
    left: 50%;
    transform:translateX(-50%) translateY(12px);
}

.display-popup-task-calendar .datepicker table tr td.old,.display-popup-task-calendar .datepicker table tr td.new{
    color: #383633;
    height: 5px;
    line-height: 1px;
    text-indent: 999999;
    overflow: hidden;
}
.datepick-with-task table tr td.old.eventful:after,.datepick-with-task table tr td.new.eventful:after,
.display-popup-task-calendar .datepicker table tr td.old.eventful:after,.display-popup-task-calendar .datepicker table tr td.new.eventful:after
{
    display: none;
}
.datepick-with-task table tr td:hover,.datepick-with-task table tr th:hover,
.display-popup-task-calendar .datepicker table tr td:hover,.display-popup-task-calendar .datepicker table tr th:hover
{
    background: none !important;
}
.datepick-with-task table tr td.old:hover,.datepick-with-task table tr td.new:hover,
.display-popup-task-calendar .datepicker table tr td.old:hover,.display-popup-task-calendar .datepicker table tr td.new:hover{
    background: none;
    pointer-events: none;
}

.datepick-with-task,.display-popup-task-calendar .datepicker{
    background: #383633;
}

.datepick-with-task table tr td,.datepick-with-task table tr th,
.display-popup-task-calendar .datepicker table tr td,.display-popup-task-calendar .datepicker table tr th{
    color: #fff;
}

.datepick-with-task table tr td.old,.datepick-with-task table tr td.new.
.display-popup-task-calendar .datepicker table tr td.old,.display-popup-task-calendar .datepicker table tr td.new{
    color: #383633;
}

.datepick-with-task:after,.datepick-with-task:before,
.display-popup-task-calendar .datepicker:after,.display-popup-task-calendar .datepicker:before{
    display: none;
}

.datepicker table tr td.today{
    color: #ffd202;
    background: none;
}
/* .datepicker table tr td .active-date{
    width: 0;
    height: 0;
} */
.active-date{
    background-color: #ffd202;
    position: absolute;
    height: 30px !important;
    width: 30px !important;
    border-radius: 30px !important;
    left: 50%;
    transform:translateX(-50%);
    z-index: 1;
    display: flex !important;                /* Add this */
    align-items: center;          /* Add this */
    justify-content: center;      /* Add this */
    top: 5px;
    color: #000000;
}

.display-popup-task-calendar .datepicker table tr td.active.active, 
.display-popup-task-calendar .datepicker table tr td:active{
    /* background-color: #ffd202; */
    background: none;
    border-radius: 20px;
}

.display-popup-task-calendar{
    display: none;
    background: #383633; 
    width: 100%;
    max-width:640px;
    
    position: fixed; 
    top: 70px; 
    left: 50%;
    transform: translateX(-50%);
    margin: 0;

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.display-popup-task-calendar .display-btn{
    float: right;
    color: #FFF;
    border: none;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    outline: none;
    font-weight: 700;
    box-shadow: none !important;
    font-size: 15px;
    text-transform: none;
    text-decoration: none;
    margin: 0px 20px 15px 0;
    padding:5px 20px;
    border:1px solid #FFF
}

#task-edit--modal .project-edit-task-modal-body .form-group label:not(.error){
    font-size: 14px;
    font-weight: 600;
}

.viewing-part.edit-input--item{
    font-size: 16px;
    color: #000;
}
.edit-input--item{
    display: none;
    position: relative;
}

.modal .form-group{
    margin-bottom: 16px;
}
.edit-view--panel{
    display: block;
    position: relative;
}
.edit-view--panel.twothird-width{
    width: 80%; 
    display: inline-block;
}
.edit-view-delete--btn{
    width: 15%; 
    display: inline-block; 
    text-align: right;
    vertical-align: top;
}
.subtask-duedate{
    width: 80%
}
#task-edit--modal .sub-task-card.white-card .edit-view--panel .edit-input--item{
    display: none;
}
/*#task-edit--modal .sub-task-card.white-card[data-iscomplete="0"] .viewing-part.edit-input--item{
    display: block;
}*/
/*#task-edit--modal .sub-task-card.white-card[data-iscomplete="1"] .viewing-part.edit-input--item{
    display: block;
}
#task-edit--modal .sub-task-card.white-card[data-iscomplete="1"] .edit-view--panel[for='subtaskDescription[]'] .editable-part.edit-input--item{
    display: block;
}
*/
.sub-task-collapse--btn,.sub-task-collapse--btn:hover{
    text-decoration: none;
}

.sub-task-collapse--btn.collapsed span{
    transform:rotate(180deg);
    display:inline-block;
}

.sub-task-collapse--btn p{
    display:inline-block;
}

.modal-content{
    background: #F5F5F5;
}

.modal-footer{
    border-top:initial;
}

.prompt-txt{
    color: #000;
}

.prompt-header{
    padding: 0 1rem;
    border-bottom: 0;
    min-height: 30px;

}

.back-to-task-page--btn,.back-to-task-page--btn:hover,.back-to-task-page--btn:active{
    border: 1px solid black;
    display: block;
    border-radius: 500px;
    margin-top: 20px;
    line-height: 40px;
}

.task-view-title{
    margin: 0;
    padding: 0;
    border-bottom: none;
    font-size: 18px;
}

.remove-image--btn,.remove-image--btn:hover,.remove-image--btn:focus{
  position: absolute;
  right: -13px;
  top: -13px;
  background: #FFD200;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  font-weight: bold;
  z-index: 10;
  text-decoration: none;
}


#siteloading{
    z-index: 9999;
}

.siteloading--panel{
    width: 250px; 
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 250px;
    text-align: center
}

.siteloading--panel svg{
    width: 100px !important;
}

.task-filter--item,.task-filter--item:hover,.task-filter--item:active{
    font-size: 14px;
    padding: 10px 0;
    text-decoration: none;
}

.task-filter--item.active{
    font-weight: 700;
    color: #000;
    border-bottom: 2px solid #FFD200;
}

.workplace-task-loading{
    text-align: center;
    display: none;
}



.workplace-no-task--lottie{
    margin: 50px auto 20px auto; 
    max-width: 300px;
    text-align: center;
    font-size: 14px;
}

.task-generated--panel{

}

.no-task-generated--panel{
    text-align:center;
}

.no-task-generated--panel a{
    padding:10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.no-task-generated--panel a:hover{
    text-decoration: none;
}

.no-task-generated--panel a * {
    display: inline-block;
    vertical-align: middle;
}

.workplace-task-success-error--item{
    display: none;
}

.forward-project-wrapper {
    display: flex;
    padding: 24px 0;
    border-bottom: 0.5px solid #C0BFBB;
    position:relative;
}

.forward-project-wrapper .checkbox-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
}

.checkbox-wrapper input[type='checkbox']:not(:checked), .checkbox-wrapper input[type='checkbox']:checked {
    position: absolute;
    visibility: hidden;
}
.checkbox-wrapper input[type='checkbox'] {
    border: 1.5px solid #000000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-color: #C0BFBB;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label, .checkbox-wrapper input[type='checkbox']:checked+label {
    position: relative;
    cursor: pointer;
    width:100%;
    height:100%;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label:before, .checkbox-wrapper input[type='checkbox']:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 1.5px solid #C0BFBB;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    outline: none;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label:after {
    opacity: 0;
    transform: scale(0);
}

.checkbox-wrapper input[type='checkbox']:not(:checked), .checkbox-wrapper input[type='checkbox']:checked {
    position: absolute;
    visibility: hidden;
}

.checkbox-wrapper input[type='checkbox']:checked {
    background-color: #FFD200;
}

.checkbox-wrapper input[type='checkbox']:checked+label:before {
    background-color: #FFD200;
    border: 1.5px solid #000000;
}

.checkbox-wrapper input[type='checkbox']:checked+label:after {
    opacity: 1;
    transform: scale(1);
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label:after, .checkbox-wrapper input[type='checkbox']:checked+label:after {
    content: url(../images/icons/icon-checkbox-tick.svg);
    position: absolute;
    top: 52%;
    left: 49%;
    transform:translate(-50%,-50%);
    font-size: 14px;
    line-height: 0.8;
    color: #000000;
    transition: all .2s;
}

.forward-project-wrapper .highlight-text {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    display:inline-block;
    vertical-align: middle;
    color:#000;
}
    
.forward-project-wrapper .owner-wrapper .icon-wrapper {
    height: 18px;
    width: 18px;
    margin-right: 8px;
    display:inline-block;
    vertical-align: middle;
}

.owner-icon {
    content: url(../images/icons/icon-owner.svg);
    height: 100%;
    width: 100%;
}

.forward-project-wrapper .owner-wrapper .highlight-text {
    font-size:14px;
    line-height:18px;
    color:#75716B;
}

.highlight-text em {
    color: #EFAC00;
    font-weight: bold;
}

#forward-modal .chat-upload-option--btn,
#forward-modal .show-chat-category,
#forward-modal .remove-img--btn{
    display:none;
}

#forward-modal .note-editable{
    pointer-events: none;
}

#forward-modal .chat-bar{
    padding:16px 64px 32px 16px;
}


#task-reply-thread-modal .automation-action--item{
    display:none;
}

.display-btn{
    padding: 5px;
    display: inline-block;
    cursor: pointer;
}





.form-group3{
    position: relative;
    margin-bottom: 25px
}
.form-group3.floating-label, .form-group3.floating-label2{
    padding-top: 20px;
    background: rgba(0,0,0,0.04);
    border-bottom: 1px solid #9E9E9E;
    
}

.form-group3 input[type=text].form-control3, .form-group3 input[type=password].form-control3,
.form-group3 input[type=text].form-control3:hover, .form-group3 input[type=password].form-control3:hover,
.form-group3 input[type=text].form-control3:focus, .form-group3 input[type=password].form-control3:focus{
    border:  none;
    font-size: 14px;
    line-height: 18px;
    padding: 0px 5px 0 5px !important;
    height:  30px;
    background: none;
    display: block;
    width: 100%;
    outline: none;
}

.floating-label .form-control3 ~ label{
    position: absolute !important;
    font-size: 13px;
}

.floating-label2 label,
.floating-label label {
    /*left: 5px !important;*/
    padding-left: 5px;
    top: 0px !important;
    position: static !important;
    color: #75716B;
}


.btn-primary,
.btn-primary:active,
.btn2,
.btn2:hover,
.btn2:focus,
.take--btn,
.take--btn:hover,
.take--btn:active,
button[type=submit],
input[type=submit],
button[type=submit]:focus,
input[type=submit]:focus,
button[type=submit]:hover,
input[type=submit]:hover {
    background: #FFD200 !important;
    
    /*height: 57px;*/
    color: #000 !important;
    border: none;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    
    outline: none;
    
    font-weight: 700;
    box-shadow: none !important;
    font-size: 15px;
    text-transform: none;
    text-decoration: none;
}


.forward-loading-panel{
    max-width:300px;
    max-height:300px;
    margin:0 auto;
}

.forward-detail-wrapper{
    width:90%;
}

.raise-invoice--btn,
.raise-invoice--btn:active{
    margin-top: 20px;
    display: inline-block;
    line-height: 48px;
    position: relative;
    margin-right: 3px;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0px 50px;
    min-width: 160px;
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: none;
    text-decoration: none !important;
    vertical-align: middle;
}

.close {
    float: right;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 1;
    filter: alpha(opacity=20);
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.popup-text {
    padding-top:35px;
    margin-bottom: 20px;
    color:#000;
}
.popup-content p, .popup-content h3 {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color:#000;
}

.popup-content-50w a:first-child {
    margin-right: 2.5%;
}

.popup-content-50w a {
    width: 45%;
    display: inline-block;
}

.raise-invoice--payment-term-update {
    padding-bottom: 20px;
}

#raiseInvoice .raise-invoice--remark {
    text-align: left;
    margin-bottom: 0;
}

.popup-content-cta {
    gap: 16px;
    padding: 30px 0 0;
}

.popup-content-cta .border-cta{
    color:#000;
}

.popup-content-cta--left-right a,
.popup-content-cta--left-right input[type='submit']{
    max-width: 150px;
    width:40%;
    display: inline-block;
    position: relative;
    margin: 0 10px;
}

.popup-content-cta--left-right input[type='submit']{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.popup-warning-icon svg{
    width:70px;
    height:70px;
}

.popup-content-cta .red-cta{
    background: #EE4056;
    color: #FFF;
    box-shadow: 0 0px 7px rgba(0, 0, 0, 0.3);
    border: none;
}

.raise-invoice--adjust-payment-term, .raise-invoice--adjust-payment-term:hover {
    color: #EFAC00;
    text-align: center;
    font-family: DM Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    padding-top: 16px;
    display: inline-block;
}

.popup-primary-btn {
    display:block;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: 1px solid #000;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    text-decoration: none !important;
}

.popup-submit--btn,
.raise-invoice--submit {
    background: #FFD200 !important;
    /* height: 57px; */
    color: #000 !important;
    border: none !important;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    outline: none;
    font-weight: 700;
    box-shadow: none !important;
    font-size: 15px;
    text-transform: none;
    text-decoration: none;
    margin-bottom:15px;
}

#genericAjaxResponseModal .notification-popup--item .icon-circle,
#genericAjaxResponseModal .notification-popup--item .icon-circle:hover {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 3px solid #EFAC00;
    width: 100px;
    height: 100px;
    text-align: center;
    color: #EFAC00;
    margin: 0 auto 20px auto;
    display: block;
}

#genericAjaxResponseModal .notification-popup--item {
    display: none;
    font-size: 19px;
    font-weight: 700;
    padding: 40px 0;
    line-height: 20px;
}

#genericAjaxResponseModal .notification-popup--item .icon-circle i {
    line-height: 100px;
    font-size: 40px;
}

#genericAjaxResponseModal .notification-popup--item .icon-triangle i {
    color: #EE4056;
    font-size: 100px;
    display: block;
    margin: 0 auto 10px auto;
}

#loadingModal .lottie-gallery--item-content{
    text-align:center;
}

#loadingModal .lottie-gallery--item-content svg{
    max-width:100px;
}

.general-loading-lottie--label{
    text-align:center;
}

.schedule-popup,
.push-to-client-popup,
.unpublish-to-client-popup{
    max-width: 480px; 
    width:90%;
    margin: 25px auto 0; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    height: auto; 
    text-align: center
}

.schedule-popup .popup-avatar{
    font-size: 60px;
    line-height: 60px;
}

.schedule-popup p{
    line-height: 24px; 
    margin-top: 20px
}

.workplace-tasks--disclaimmer{
    padding:20px;
    background:#FFF;
    color:#000;
}

.workplace-tasks--disclaimmer>div{
    padding:5px 10px;
}


.black-text{
    color:#000;
}

.uploading-loader-chat-bar{
    background: rgba(56, 54, 51, 1);
    width: 100%;
    text-align: center;
    margin: 0;
}

.uploading-loader-chat-bar .lottie-gallery--item-content svg{
    max-width: 100px;
}

.uploading-loader-chat-bar .lottie-gallery--item-content svg path{
    fill: #fff;
}

.project-menu--btn{
    width:30px;
    height:auto;
    display:inline-block;
    vertical-align: middle;
}

.project-menu--btn img{
    display:inline-block;
    vertical-align: middle;
}



.current-company--panel{
    display: inline-block; 
    background: #E5E5E1; 
    font-size: 14px; 
    text-align: center; 
    border-radius: 500px;
    position: relative;
    top: 7px;
    margin-left: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.current-company--panel a{
    display: inline-block; 
    min-width: 120px; 
    padding: 10px; 
    color: #75716B;
    font-style: italic;
    font-weight: 400;
}
.current-company--panel a:hover,.current-company--panel a:focus{
    text-decoration: none;
}

.company-view--listing{
  list-style: none;
  margin: 0;
  padding: 0;
}
.company-view--listing li{
  border-bottom: 1px solid #E5E5E1;
}
.company-view--listing li a{
  display: block;
  padding: 24px 5px;
  text-align: center;
  color: #75716B;
}

.company-view--listing li a.selected{
  color: #000;
  font-weight: 700;
}

.company-view--listing li a.selected .change-company--icon{
  position: absolute;
  right: 15px;
}


#workplace-projectmenu-modal a.disabled{
    opacity: 0.5;
}

#workplace-projectmenu-modal .lottie-gallery--item-content svg{
    max-width: 50px;
}

.workplace-allfiles-modal .lottie-gallery--item-content svg,
#workplace-projectcosts-modal .lottie-gallery--item-content svg{
    max-width: 150px !important;
}
.workplace-allfile-media-lottie,
.workplace-allfile-docs-lottie{
    display: none;
}

.workplace-listing--loading{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.ordering-taskdrawer-cta--wrapper{
    padding-top:40px;
}

.ordering-taskdrawer-cta--wrapper>input{
    margin-right:20px;
}

.go-to-order--btn,
.view-order-list--btn{
    display: inline-block;
    line-height: 40px;
    position: relative;
    /* float: left; */
    margin-right: 3px;
    background: none !important;
    border: 1px solid #000;
    color: #000;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0px 20px;
    min-width: 120px;
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: none;
    text-decoration: none !important;
    vertical-align: middle;
}

.go-to-order--btn i,
.view-order-list--btn i{
    margin-left:5px;
    font-size:18px;
    vertical-align: middle;
}

.task-title--special-star-icon{
    display:none;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.task-title--remove-cta{
    display:none;
    width:50px;
    height:100%;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    cursor:pointer;
}

.task-title--remove-cta svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.task-title--remove-cta svg path{
    stroke:#000;
}

.task-title--special .task-title--special-star-icon,
.task-title--value-exist .task-title--remove-cta{
    display:block;
}

.task-title--value-exist input[name='editTaskTitle'],
.task-title--value-exist input[name='addTaskTitle']{
    pointer-events: none;
}

.task-title--special input[name='editTaskTitle'],
.task-title--special input[name='addTaskTitle']{
    padding-left:35px;
    pointer-events: none;
}

input[name='editTaskTitle'].error,
input[name='addTaskTitle'].error{
    margin-bottom:40px;
}

select[name='addTaskAssigned'],
select[name='editTaskAssigned']{
    left:0;
    width:100% !important;
}

select[name='addTaskAssigned'] + .select2-container ,
select[name='editTaskAssigned'] + .select2-container{
  width: 100% !important;
}

#addTaskTitle-error,
#editTaskTitle-error{
    position:absolute;
    bottom: -30px;
}

.special-task-option.open {
    display: block;
}
.special-task-option {
    box-shadow: 0px 7px 27px rgba(75, 54, 0, 0.05), 0px 2.92443px 11.28px rgba(75, 54, 0, 0.0359427), 0px 1.56354px 6.0308px rgba(75, 54, 0, 0.0298054), 0px 0.876509px 3.38082px rgba(48, 34, 0, 0.025), 0px 0.465507px 1.79553px rgba(75, 54, 0, 0.0201946), 0px 0.193708px 0.747159px rgba(75, 54, 0, 0.0140573);
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 0;
    height: 140px;
    position: absolute;
    width: 100%;
    z-index: 2;
    display: none;
}

.special-task-option--panel a {
    display: block;
}
.open > a {
    outline: 0;
}
.add-custom-special-task--evt {
    border-bottom: 1px solid #E5E5E1;
    margin: 0;
    padding: 5px 10px;
    font-style: italic;
    text-decoration: none;
}

.add-custom-special-task--evt:hover{
    text-decoration: none;
}

.add-custom-special-task--evt i {
    font-size: 20px;
    position: relative;
    top: 3px;
    margin-right: 10px;
}

.tasks-from-milestone-list {
    list-style: none;
    padding: 0 10px;
    max-height: 100px;
    overflow: auto;
    margin: 0 5px 0px -10px;
}

.tasks-from-milestone-list li a.add-special-task--evt.disabled, .tasks-from-milestone-list li a.add-special-task--evt.hasCompletedTask {
    opacity: 0.3;
}
.tasks-from-milestone-list li a.add-special-task--evt {
    color: #000;
    padding: 5px 10px;
}
.tasks-from-milestone-list a {
    display: block;
}

#specialTaskConfirmationModal .popup-content p{
    color:#000;
}

.popup-icon-container{
    padding:30px 0 25px;
}

.task-title-input,
.task-title--wrapper{
    position:relative;
}

.no-assignee{
    color: #EE4056 !important;
    font-style: italic;
}


.btn-logout,button.btn-logout,
.btn-logout:hover,button.btn-logout:hover,
.btn-logout:focus,button.btn-logout:focus{
    background: none !important;
    border: 1px solid #000 !important;
}

#workplace-projectcosts-modal .modal-body{
    background: #fff;
}
.scroll-btn.disabled{
    display: none;
}
.scroll-btn{
    position: fixed; 
    bottom: 130px; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    background: #373632;
    right: 30px;
    z-index: 1000; /* put in 1000 to try avoid any other element that will be on top of the button */
}

.feedList-container.isArchived .scroll-btn{
    bottom:30px;
}

.scroll-btn svg{
    margin: 5px auto 0 auto;
    display: block;
}


.mark-complete--form-success-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);

  text-align: center;
}

.mark-complete--form-success-content p{
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
}

.mark-complete--form-success-content i{
  font-size: 60px;
  color: #EFAC00;
  margin-bottom: 20px;
  display: inline-block;
  animation: iconAppearScale .3s ease;
}

.feed-content--panel>a{
    /* padding: 0 35%; */
    color: #B07B2A;
}

.btn-primary.double-confirm-unpublishclient--btn{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}

.btn-primary.double-confirm-unpublishclient--btn:hover{
    background: #EE4056 !important;
    color: #fff !important;
    border: 1px solid #EE4056 !important;
}

#generate-task .popup-content{
    padding-top:40px;
    padding-bottom:10px;
    color:#000;
}

.task-list--manual-generate{
    padding: 15px 20px;
    text-align: center;
}

.task-list--manual-generate a{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important
}

.generate-task--popup:hover{
    text-decoration:none;
}

.task-statement-remarks {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #C0BFBB;
    background: #FFF;
}

.first-level-content-sticky>.task-filter--panel>.task-filter--item{
    width: 33%;
}

.mark-complete--form-loading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%,-50%);
    text-align: center;
}

.mark-complete--form-loading .lottie-gallery--item-content svg {
    max-width: 80px;
}

.sub-task-card-loader, .mark-complete--form-success{
    border-radius: 12px;
    margin-top: 24px;
    padding: 20px 10px;
    background: #fff;
    box-shadow: 0px 7px 27px 0px rgba(75, 54, 0, 0.05), 0px 2.924px 11.28px 0px rgba(75, 54, 0, 0.04), 0px 1.564px 6.031px 0px rgba(75, 54, 0, 0.03), 0px 0.877px 3.381px 0px rgba(48, 34, 0, 0.03), 0px 0.466px 1.796px 0px rgba(75, 54, 0, 0.02), 0px 0.194px 0.747px 0px rgba(75, 54, 0, 0.01);
    position: relative;
    border: 1px solid #C0BFBB;
}

.project-status--pill.running{
    background: #FFF0A8;
    color: #000 !important;
    font-weight: 700;
    border: #FFF0A8;
}

.project-status--pill.completed{
    background: #00B485;
    color: #fff !important;
    border: none;
}

.project-status--pill.archived{
    background: #E5E5E1;
    color: #75716B;
    border-color: #E5E5E1 !important;
}

.project-status--pill.archived i{
    color: red;
}