.headline-text-30{
    font-family: 'Platform Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 35px;
    display: flex;
    align-items: center;
    letter-spacing: 0.03em;
}

.dark-color-text{
    color: #000000;
}

body {
    background: #fff;
    font-family: 'DM Sans', sans-serif;
}


/*page*/
.workplace-content{
    display: flex; 
    flex: 1 1 auto; 
    overflow: hidden;
}

.workplace-content .workplace-sticky-container{
    display: flex; 
    flex-direction: column; 
    flex: 0 0 380px; 
    margin-right: 0px; 
    border: 1px solid #E6E5E1;
}

.workplace-content .workplace-sticky-container .workplace-sticky-wrapper{
    display: flex; 
    flex-direction: column; 
    position: relative; 
    overflow: auto;
}

.propertyItemHTML.empty-flex{
     display: flex; 
     height: 75%;
}

.empty-content-container{
    display: flex; 
    flex-direction: column; 
    flex: 1;
}

.empty-header-panel{
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    padding: 24px 0px 8px 40px;

    font-family: 'Platform Bold'; 
    font-style: normal; 
    font-weight: 700; 
    font-size: 30px; 
    line-height: 35px; 
    letter-spacing: 0.03em; 
    color: #000000; 

    border-bottom: 1px solid #C0BFBB;
}

.empty-workplace-filter-container,
.empty-workplace-content-container,
.empty-project-container{
    display:flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%;
}

.empty-workplace-content-container{
    flex: 1;
}

.empty-project-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* To avoid the absolute hinder the click event of other element it was overlapping */
    height: 50%;
}

.empty-project-text-wrapper{
    font-family: 'DM Sans',sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #000000;
}

body.workplace-page {
    /*height: 10vh;
  width: 100%;
  overflow: hidden;
  position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 500px;
}

body.workplace-page #header {
    display: none;
}

body.workplace-page .fixed-container {
    overflow: auto;
    position: relative;
    height: 100vh;
    /*height: 100vh;
  height: 400px;*/
    /*min-height: 400px;*/
}

  /*task page  */
    .bum-date-delay--form{
      width: 400px; 
      margin: 0 auto;
    }
    .bum-date-delay--form label.error{
/*        position: absolute;*/
    }
    .bum-date-delay--form .hide-checkbox{
/*        border: 1px solid red;*/
    }
    .bum-date-delay--form .hide-checkbox .col-sm-5{
        display: none;
    }
    .bum-date-delay--form .hide-checkbox .col-sm-7{
        opacity: 0.5;
    }
    .delay-label--row{
      margin-bottom: 10px;
    }
/*page ends*/

.flex{
    display: flex;
}
.flex.flex-wrap{
    flex-wrap: wrap;
}
.flex.flex-column{
    flex-direction: column;
}
.flex.space-between{
    justify-content: space-between;
}
.flex.align-center{
    align-items: center;
}
.flex.fill{
    flex: 1;
}
.flex.center{
    justify-content: center;
    align-items: center;
}
.flex.end{
    justify-content: flex-end;
}
.equal-flex{
    flex: 1;
}

.full-width{
  width: 100%;
}

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

.ml-16{
  margin-left: 16px;
}
.ml-24{
    margin-left: 24px;
}

.mr-4{
    margin-right: 4px;
}
.mr-8{
    margin-right: 8px;
}
.mr-16{
    margin-right: 16px;
}

.mb-4{
    margin-bottom: 4px;
}
.mb-24{
    margin-bottom: 24px;
}
.mb-32{
    margin-bottom: 32px;
}
.mb-40{
    margin-bottom: 40px;
}

.new-branding-red-color{
    color: #EE4056;
}
.new-branding-orange-color{
    color: #F16321;
}
.new-branding-dark-yellow-color{
    color: #EFAC00;
}
.new-branding-black-color{
    color: #000000;
}

.font-small-regular{
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}
.font-small-bold{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
}
.font-body-regular{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.font-body-bold{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}
.font-big-header-24{
  font-family: 'Platform Bold', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.05em;
}
.font-header-20{
    font-family: 'Platform Bold', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0.05em;
}
.font-mini-regular{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}
.font-mini-bold{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
}
.font-mini-bold-italic{
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}
.font-small-italic{
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}
.font-bold{
  font-weight: 700;
}

.no-text-decoration{
    text-decoration: none !important;
}

.rotate180{
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.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;
}

.offcanvas-head{
    padding: 24px 16px;

    position: sticky;
    top: 0;
    z-index: 1999;
    background-color: #F5F5F5;
}

.offcanvas-head .offcanvas-tools {
    position: relative;
    top: -30px;
}

#offcanvas-feed-category .offcanvas-head .offcanvas-tools,
#offcanvas-feed-filter .offcanvas-head .offcanvas-tools{
    top: 0;
}

.md.md-close {
    top: 3px;
    margin: 0px;
}

.md-close:before {
    /*content: url("../images/offcanvas-close-icon.svg");*/
    background-image: url('../images/offcanvas-close-icon.svg');
    background-size: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
}

.offcanvas-head .offcanvas-tools a.btn.btn-icon-toggle {
    position: relative;
    top: -2px;
}

.offcanvas-feed--title {
    line-height: 20px;
    width: 100%;
    padding-top: 5px;
    font-size: 20px;
    font-weight: 700;
}

#offcanvas-feed-category .input-container,
#offcanvas-feed-filter .input-container {
    padding-left: 0;
    padding-right: 30px;
    display: block;
    margin-bottom: 0;
}

#offcanvas-feed-category .input-container span,
#offcanvas-feed-filter .input-container span {
    position: absolute;
    right: 0;
    top: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

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

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

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

.feeds-category-filter--form ul li:nth-child(5) .input-container img,
.feeds-category-filter--form ul li:nth-child(8) .input-container img {
    top: -1px !important;
}

#offcanvas-feed-category .checkmark,
#offcanvas-feed-filter .checkmark {
    left: auto;
    right: 0;
}

#offcanvas-feed-category .offcanvas-body {
    padding: 20px;
}

#offcanvas-feed-category ul,
#offcanvas-feed-filter ul {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

#offcanvas-feed-category ul li,
#offcanvas-feed-filter ul li {
    border-bottom: 1px solid #C0BFBB;
    padding: 10px 0;
}

#offcanvas-feed-category ul li:last-child,
#offcanvas-feed-filter ul li:last-child {
    border-bottom: none;
}

#offcanvas-feed-category ul li i {
    display: none;
}

#offcanvas-feed-category ul li a,
#offcanvas-feed-filter ul li a {
    text-decoration: none;
    display: block;
    padding: 0;
}

.offcanvas-head~.offcanvas-body {
    /*margin-top:  40px;*/
    width: 100%;
    padding-bottom: 40px !important;
    position: relative;
}

.reply-task--panel .offcanvas-head .offcanvas-tools,
#offcanvas-post .offcanvas-head .offcanvas-tools {
    z-index: 100;
    /*background: #fff;*/
    font-weight: 700;
    left: 0;
    padding: 10px 0 0 15px;
    width: 98%;
    top: 0;
}

.reply-task--panel .offcanvas-head .offcanvas-tools a,
#offcanvas-post .offcanvas-head .offcanvas-tools a {
    z-index: 10;
    position: relative;
    top: -15px;
}

.offcanvas-pane.offcanvas-fixed-head {
    overflow: hidden;
}

.offcanvas-pane.offcanvas-fixed-head .offcanvas-body {
    overflow: auto;
    height: calc(100% - 40px);
}

.offcanvas-body .chat-bar {
    /*position: relative;*/
    /*overflow: hidden;*/
    position: fixed;
    bottom: 0;
    padding-top: 16px;
    padding-bottom: 40px;
}

.taggable-panel {
    display: none;
    margin: 0 10px;
    position: absolute;
    width: 97%;
    top: -200px;
    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;
}

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

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

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

.chat-bar {
    padding: 10px 40px 10px 48px;
    background: rgba(56, 54, 51, 1);
    position: relative;
    width: 100%;
    bottom: 0;
    z-index: 500;
    flex: 1;
}

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

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

.note-editor.note-airframe .note-editing-area .note-editable {
    padding: 13px 0 0 16px;
    min-height: 40px;
    overflow: hidden;
}

.chat-bar .btn.btn-icon-toggle {
    position: absolute;
    right: 12px;
    background: #6F4E25;
    top: 7px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding-top: 3px;
}

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

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

    position: absolute;
    left: calc(50% - 119px/2 + 1px);
    top: -14px;

    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;
}

.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-container .chat-edit-cancel-wrapper .chat-edit-cancel-icon{
    content: url("../images/chat-edit-cancel-icon.svg");
    height: 100%;
    width: 100%;
}

.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;
}

.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;
}

.background-gradient.active{
    display: block;
}

.blur-in
{
    -webkit-animation: blur 2s forwards;
    -moz-animation: blur 2s forwards;
    -o-animation: blur 2s forwards;
    animation: blur 2s forwards;
    background: rgba(0, 0, 0, 0.5);
}

.blur-out {
    -webkit-animation: blur-out 2s forwards;
    -moz-animation: blur-out 2s forwards;
    -o-animation: blur-out 2s forwards;
    animation: blur-out 2s forwards;
}

@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-moz-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-o-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-webkit-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@-moz-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@-o-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

#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;
}

.shadow-background {
    background: #F5F5F5;
    border: none;
    box-shadow: 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);
}

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

.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: 0;
    top: 0;
    width: 40px;
    height: 30px;
    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: 0;
    width: 100%;
    font-size: 20px;
    text-align: center;
    color: #FFD200 !important;
    text-decoration: none !important;
    top: 17px;
    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: 20px;
}


/*.chat-upload-option--btn svg,.chat-send-option--icon svg{
  width:  15px;
  height: 15px;
  color:  #fff;
  border-color: #fff;
  margin:  7px auto 0 auto;
}*/

.chat-upload--menu {
    display: block;
    position: absolute;
    width: 40px;
    left: 8px;
    /*bottom: -100px;*/
    top: 0px;
    background: #FFD200;
    /*-webkit-border-top-left-radius: 60px;
  -webkit-border-top-right-radius: 60px;
  -moz-border-radius-topleft: 60px;
  -moz-border-radius-topright: 60px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;*/
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    /*transition: all 0.3s ease;*/
    z-index: 1;
    padding: 10px 0;
    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 {
    /*bottom: 40px;*/
    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;
}


/*tmog ui*/

.table-section-listing>.card,
.table-section-listing form>.card,
.mog2-card {
    min-height: calc(100vh - 64px);
    margin-bottom: 0;
}

.section-body:first-child {
    margin-top: 0;
}

.table thead {
    opacity: 1
}

.font2 {
    font-family: 'DM Sans', sans-serif;
}




html:not([data-scroll='0']) .header-nav.header-nav-profile .dropdown {
    background: #fff;
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
}

.header-nav.header-nav-profile {
    border-radius: 10px;
}

.header-nav-profile .dropdown.open>a {
    box-shadow: none;
    border-color: none
}

.header-nav-profile a{
    color: inherit;
}

input::-webkit-contacts-auto-fill-button,
input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.full-inline-block {
    display: inline-block;
    width: 100%;
    background: #E5E5E5;
    text-align: center;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


/*summernote*/

.note-editable ol,
.note-editable ul {
    padding-left: 20px;
}

.note-editable ol li,
.note-editable ul li {
    font-size: 13px;
    line-height: 15px;
}

.note-editable ol {
    list-style-position: outside;
}

.note-popover.popover{
    display: none !important;
}

/*icons*/

.tmog-icons {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

.Mac-OS .xoutline-drop ::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #c7c7c7;
    right: 5px;
}

.Mac-OS .xoutline-drop ::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
    height: 10px;
}

.Mac-OS .xoutline-drop ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #FFD200;
}

.header-nav .header-nav-brand img {
    top: 13px;
    min-width: auto;
    min-height: auto
}

.logo {
    display: inline-block;
    width: 32px;
    position: absolute;
    top: 2px;
}

.logo-txt {
    display: inline-block;
    font-size: 15px;
    width: 100px;
    line-height: 15px;
    margin-top: 4px;
    padding-left: 12px;
    text-transform: uppercase;
    color: #000;
    font-weight: 700
}

.loginpage .logo-txt {
    margin-left: 35px;
    color: #fff;
}

.loginpage .input-container {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.54);
}

.change-forgot--btn,
.change-login--btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    display: inline-block;
    color: #9E9E9E;
    font-size: 15px;
    padding-top: 8px;
}

.change-forgot--btn:hover,
.change-login--btn:hover {
    color: #9E9E9E;
    text-decoration: none;
}



.fixed-container {
    min-width: 1200px
}

input:hover,
textarea:hover,
textarea:focus {
    outline: none
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    vertical-align: top;
}

a:focus {
    text-decoration: none
}


/*form ui*/

.select2-container {
    /*height: 40px;*/
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: white;
}

.has-error .bootstrap-select .dropdown-toggle {
    border: 1px solid #f44336;
}

.has-error .form-control:not(.bootstrap-select) {
    border: 1px solid #f44336 !important;
}

.has-error .select2-container {
    border: 1px solid red;
}

.has-error select,
.has-error input,
.has-error textarea {
    border: 1px solid red !important;
}

.has-error input.form-control2 {
    border: none !important;
    border-bottom: 1px solid red !important;
}

.select2-container .select2-choice,
.select2-container .select2-choice>.select2-chosen {
    min-height: 35px !important;
    line-height: 37px
}

.select2-container .select2-choice .select2-arrow {
    line-height: 34px !important;
    font-size: 12px !important;
    right: 10px;
}

.select2-dropdown-open .select2-choice {
    background: none !important;
}

.select2-container .select2-choice>.select2-chosen {
    padding-left: 5px !important;
    font-size: 16px;
}

.input-container.selection-box--item {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 15px 10px 15px 50px;
    border: 1px solid #C0BFBB;
    position: relative !important;
    display: block;
    margin-bottom: 20px;
    color: #000;
}

.input-container.selection-box--item .radiomark {
    top: 15px;
    left: 15px;
}

.input-container.selection-box--item.selected {
    border: 1px solid #000;
}

.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;
}

.input-container {
    position: relative;
    padding-left: 30px;
}
label.input-container{
  font-weight: normal !important;
}

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


/*form toggle*/
.form-toogle--panel{

}
.form-toggle--item:first-child{
    display: block;
}
.form-toggle--item{
    display: none;
}


/* When the checkbox is checked, add a blue background */
.edit-completed-task--form .img-table-cell.document  .input-container input:checked~.checkmark,
.edit-completed-task--form .img-table-cell.document .input-container input:checked~.radiomark,
.edit-push-client--form .img-table-cell.document  .input-container input:checked~.checkmark, 
.edit-push-client--form .img-table-cell.document .input-container input:checked~.radiomark,
.edit-push-client-step2--form .img-table-cell.document  .input-container input:checked~.checkmark, 
.edit-push-client-step2--form .img-table-cell.document .input-container input:checked~.radiomark,
.input-container input:checked~.checkmark,
.input-container input:checked~.radiomark {
    background-color: #FFD200;
    border-color: #000;
}

.input-container.disabled input:checked~.checkmark,
.input-container.disabled input:checked~.radiomark {
    opacity: 0.3;
}

.remove-btn,
.remove-btn:hover,
.remove-btn:focus,
input[type=submit].remove-btn,
input[type=submit].remove-btn:hover,
input[type=submit].remove-btn:focus
 {
    background-color: #EE4056 !important;
    line-height: 48px;
    font-size: 15px;
    display: inline-block;
    padding: 0 15px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    color: #fff !important;
    text-decoration: none;
    min-width: 120px;
    text-align: center;
    font-weight: 700 !important;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after,
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.input-container input:checked~.checkmark:after,
.input-container input:checked~.radiomark:after {
    display: block;
}


/* Style the checkmark/indicator */

.input-container .checkmark:after,
.input-container .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-container .checkmark:after{
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -2px;
    left: 3px;
}

button,
input[type=reset] {
    color: #9E9E9E;
    background: none;
    font-weight: 700 !important;
}

button:hover,
input[type=reset]:hover,
button[type=button]:hover {
    text-decoration: none !important;
}
.close{
    opacity: 1 !important;
}

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


/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

label.label-cursor {
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /*border: 1px solid green;*/
    /*-webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;*/
    transition: background-color 5000s ease-in-out 0s;
}

.input-icon--panel {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
}



    
label.form-control-label {
    text-align: right;
    position: relative;
    margin: 34px;
    padding-right: 45px;
}

.form-group>label,
.form-group .control-label,
.form-group .form-control~label,
.task-requirement--listing li label {
    font-weight: 700;
    font-size: 14px;
    opacity: 1;
    line-height: 16px;
}

.form-group>label span.thin{
  font-weight: 400;
}

.form-group>label span.italic{
  font-style: italic;
}

.form-group .form-control2,
.form-group .form-control2:focus {
    border: none;
    border-bottom: 1px solid black;
    display: block;
    width: 100%;
    outline: none;
    font-size: 17px;
}
.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.floating-label3{
    padding-top: 0;
    background: rgba(0,0,0,0.04);
}

.form-group3.floating-label3 input[type=text].form-control3,
.form-group3.floating-label3 input[type=text].form-control3:hover,
.form-group3.floating-label3 input[type=text].form-control3:focus{
    height: 56px;
}


.floating-label .form-control3 ~ label{
    position: absolute !important;
}
.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;
}

/* .form-group .form-control:focus, */
.form-group input.form-control,
.form-group input[type=text].form-control,
.form-group input[type=password].form-control,
.form-group input[type=number],
.form-group input[type=number]:focus,
.form-group textarea
/*.floating-label2 .select2-container-multi .select2-choices .select2-search-field input*/

{
    padding: 10px !important;
    min-height: 30px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-weight: 400;
    font-size: 16px;
    background: #fff;
    
}

.form-group input.form-control[readonly]{
  cursor: default;
}

.with-currency input[type=number],.with-currency input[type=number]:focus{
  padding-left: 60px !important;
  text-align: right;
}

.with-currency .currency-sign{
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 16px;
}


.form-group input[type=text].form-control.projectSize{
    font-style:italic;
    padding-right: 50px !important
}

.form-group textarea.form-control,
.form-group textarea.form-control:focus {
    padding: 10px 10px;
    border: 1px solid #C0BFBB;
    min-height: 100px;
}

.floating-label2 .select2-container-multi .select2-choices .select2-search-field input,
.floating-label .select2-container-multi .select2-choices .select2-search-field input {
    min-height: 26px
}

.floating-label.form-group textarea.form-control {
    padding: 0px 5px 0 5px;
    position: relative;
    height: 100px;
}

.floating-label .form-control.dirty~label {
    top: 5px !important;
}

.form-control[readonly]{
    
    border: none;
}
.form-control[disabled]{
    background: #ededed !important
}

.form-group input[type=text].form-control.lockAdded {
    padding-right: 25px !important;
}

.readonly-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -25px;
}


/*.form-control.datepicker[readonly]{
  background: transparent !important;
}*/

.input-daterange {
    padding-top: 15px;
}

.input-daterange label {
    top: -15px !important;
}

.has-error .input-group-addon {
    color: #0c0c0c;
    background: none;
    border: none;
}

textarea {
    resize: none
}

.alert strong {
    display: block;
}

.view-action .form-group {
    padding-top: 5px !important;
}


/*marginal sidebar*/

.margin-x-notes-sidepanel {
    border-top: 1px solid #E4E4E4;
}

.margin-x-notes-sidepanel .nav-tabs {
    display: table;
    width: 100%
}

.margin-x-notes-sidepanel .nav-tabs li {
    display: table-cell;
    width: 50%;
}

.margin-x-notes-sidepanel .nav-tabs li.active {
    border-bottom: 1px solid #0aa89e;
}

.margin-x-notes-sidepanel .nav-tabs li.active a {
    border-bottom: none !important
}

.margin-x-notes-sidepanel .nav-tabs i {
    font-size: 20px;
    display: block;
    line-height: 24px;
    margin: 5px 0 2px 0;
}

.marginbox {
    border: 1px solid #E4E4E4;
    padding: 0 15px;
    text-align: center;
}

.marginbox.great,
.marginbox.good,
.marginbox.all {
    background: #ECF9F3
}


/*.marginbox.operations*/

.marginbox.creative {
    background: #E3F2FD
}


/*.marginbox.operations{
  background: #E3F2FD
}*/

.marginbox i {
    position: relative;
    top: 0px;
    margin-right: 5px;
    font-size: 16px
}

.marginbox.great.marginCalculation i,
.marginbox.good.marginCalculation i,
.marginbox.great.marginCalculation .marginal-box--amt,
.marginbox.good.marginCalculation .marginal-box--amt,
.marginbox.great.marginCalculation .marginal-box--intro,
.marginbox.good.marginCalculation .marginal-box--intro {
    color: #0AA89E;
}

.marginbox.marginCalculation .marginal-box--amt,
.marginbox.marginCalculation .marginal-box--amt {
    font-weight: bold;
    font-size: 30px;
    line-height: 34px
}

.marginbox.subpar.marginCalculation i,
.marginbox.subpar.marginCalculation i,
.marginbox.subpar.marginCalculation .marginal-box--amt,
.marginbox.subpar.marginCalculation .marginal-box--amt,
.marginbox.subpar.marginCalculation .marginal-box--intro,
.marginbox.subpar.marginCalculation .marginal-box--intro {
    color: #C62828;
}

.marginal-box--intro {
    margin-bottom: 10px;
}

.marginbox.marginQty i,
.marginbox.marginQty i {
    color: #00AEEF;
}

.marginbox.marginQty .marginal-box--amt strong,
.marginbox.marginQty .marginal-box--amt strong {
    font-size: 30px;
    line-height: 34px
}


/*.marginbox.good{
  background: #E3F2FD
}*/

.marginal-box--title {
    font-size: 14px;
    margin-top: 10px;
    color: #9E9E9E;
}

.marginal-box--amt {
    font-size: 20px;
}

.boxofinfo .form-group .text-sm,
.boxofinfo {
    line-height: 14px;
    color: #9E9E9E;
}

.boxofinfo div {
    color: #000;
}

.gantt_control .form .form-group {
    margin: 0;
}

.form-control-static {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 20px;
    word-break: break-all;

}

.form.info .form-group,
.form-inline.info .form-group {
    margin-bottom: 5px;
}

.select2 {
    border: 1px solid #e5e6e6;
}

.form-group {
    /*padding-top: 20px !important;*/
    padding: 0 !important;
}

.select2-container.form-control {
    min-height: 30px !important;
    border: 1px solid #C0BFBB;
}

.gantt_control .select2-container.form-control {
    height: 26px;
}

.form-group.disabled {
    border-bottom: none !important;
}

.form-group.disabled label,
.form-group.disabled select,
.form-group.disabled input {
    /*opacity: 0.3*/
}


.form-group.no-label {
    padding-top: 0 !important;
    background: rgba(0, 0, 0, 0.04)
}

.form-group.floating-label3 {
    padding-top: 0px !important;
    /*background: rgba(0,0,0,0.04)*/
}

.form-group.floating-label3 input[type=text].form-control,
.form-group.floating-label3 input[type=password].form-control {
    line-height: 40px;
    height: 56px
}

.form-group.with-reply {
    padding: 15px !important;
    background: rgba(0, 0, 0, 0.04)
}

.form-group.with-reply textarea {
    border: none !important;
    /*margin-top: 20px;*/
}

.form-group.with-reply .form-control~label {
    top: auto;
    bottom: 0;
    color: red;
}

.replying-msg--panel {
    background: rgba(255, 210, 0, 0.12);
    padding: 12px 12px 12px 12px;
    border-left: 2px solid #FFD200;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
    max-height: 250px;
    word-wrap: break-word
}

.replying-msg--panel.with-attachment {
    padding-right: 80px;
}

.replying-msg--panel .reply-has-img {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 5px;
    top: 10px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #E0E0E0;
}

.reply-cell {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
}

.replying-msg--panel .reply-has-img img {
    width: 100%;
}

.reply-user--txt {
    word-wrap: break-word
}


/*.replying-msg--panel::after{
  content: " ";
  position: absolute;
  height: 30%;

  left: 0; bottom: 0; z-index: 10; background: linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,0)); width: 100%
}*/

.ori-msg--name {
    color: #FFD200;
    line-height: 18px;
    font-size: 14px
}

.floating-label .form-control~label {
    position: static;
    font-size: 12px;
    top: 15px;
    padding-left: 5px;
}

.floating-label .form-control:focus~label,
.floating-label.form-group input:not(:placeholder-shown)~label {
    top: 0px;
}

.floating-label2 {
    /*max-height: 57px;*/
}

.floating-label2 .select2-container.form-control {
    /*padding-top: 22px;*/
}

.select2-container-multi .select2-choices .select2-search-field {
    /*padding-top: 22px !important;*/
}

.select2-container-multi .select2-choices .select2-search-field .form-control{
    border:  none;
    height: 34px;
}

.select2-container-multi .select2-choices .select2-search-choice {
    background: #F5F5F5;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #000000;
    margin: 4px;
}

.select2-search-choice-close:before{
  color: #000000;
  margin: 8px;
}

.select2-search-choice-close:hover{
  background: none;
}

.floating-label2 .select2-container-multi .select2-choices .select2-search-choice {
    /*top: 20px;*/
    /*margin-top: 25px;*/
    margin: 2px;
    border: none;
}

.floating-label2 label,
.floating-label label {
    /*left: 5px !important;*/
    padding-left: 5px;
    top: 0px !important;
    position: static !important;
    color: #75716B;
}

.floating-label2 .select2-search-field label {
    display: none
}

.floating-label2 .select2-container-multi .select2-choices {
    /*border: 0 ; */
    padding: 0;
    min-height: 30px
}

.form-control {
    border: none;
    font-size: 14px;
    line-height: 18px;
}

.dropdown.bootstrap-select.form-control {
    height: 40px;
}

.form-control.inline {
    width: 150px;
    display: inline-block;
}

select.form-control {
    border: 1px solid #C0BFBB;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right .7em top 50%, 0 0 !important;
    background-size: .65em auto, 100% !important;

    border: 1px solid #C0BFBB !important;
    padding: 0 25px 0 20px;

    background: #fff;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    border-radius: 6px !important;
    font-size: 16px;
}

.form-group select.form-control:focus{
    border-color: #C0BFBB;
}

.form-group.has-error select.form-control:focus{
    border: 1px solid red; 
}

.select2-choice{
    
}

.select2-container-multi.select2-container-disabled .select2-choices {
    border: none !important;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
    background: #0aa89e !important;
    border-color: #0aa89e !important;
}



.form-group textarea.form-control {
    padding: 0 5px;
}

.floating-label2 .select2-container-multi .select2-choices .select2-search-field input,
.floating-label .select2-container-multi .select2-choices .select2-search-field input {
    min-height: 26px
}

.floating-label.form-group textarea.form-control {
    padding: 0px 5px 0 5px;
    position: relative;
    height: 100px;
}

.floating-label .form-control.dirty~label {
    top: 5px !important;
}


/*color: #0aa89e;
  opacity: 1*/

.floating-label2.form-group input[type=checkbox] {
    margin-top: 10px;
    margin-left: 5px;
}

.form-group select.form-control {
    /*-webkit-appearance:none;*/
}

.floating-label.form-group select.form-control,
.floating-label2.form-group select.form-control {
    height: 40px;
    position: relative;
}


/*.floating-label.form-group select.form-control,.floating-label2.form-group select.form-control{
  height: 30px;
  position: relative;
  top:-10px;
  padding-top: 10px;
}*/

.select2-container .select2-choice,
.select2-container .select2-choice>.select2-chosen {
    
    line-height: 37px
}

.select2-dropdown-open .select2-choice {
    background: none !important;
}

.select2-container .select2-choice>.select2-chosen {
    padding-left: 5px !important;
}

.form-group.floating-label input[type=file] {
    padding-top: 25px;
    height: 56px;
    padding-left: 5px;
}

.form-group.floating-label input[type=file]~label {
    top: 0;
}

.relative-field{
    position: relative;
}

.clear-planning-date--btn,
.clear-all-dates--btn,
.clear-planning-enddate--btn{
    position: absolute;
    top: 7px;
    right: 5px;
}

.clear-all-dates--btn2{
    cursor: pointer;
}

.save-edited-client-update,.drawer2-primary--btn{
    width:  100%;
}


/*special form ui*/
.normal-date--flow .special-flow--toggle{
    display: none;
}

.normal-date--flow .normal-flow--toggle{
    display: inline;
}


.normal-date--flow.activate .special-flow--toggle{
    display: inline;
}

.normal-date--flow.activate .normal-flow--toggle{
    display: inline-block;
}
.normal-date--flow.activate .normal-flow--toggle:first-child{
    display: none;
}

/*login page*/

section.section-account .img-backdrop,
section.section-account .spacer {
    height: 250px;
}

.loginpage .form-control-feedback {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.54);
    line-height: 20px;
    position: absolute;
    top: 20px;
}

.loginpage .form {
    display: none
}

.loginpage .form.login-panel {
    display: block;
}


/*workplace*/

.note-hint-popover .popover-content .note-hint-group .note-hint-item {
    line-height: 18px;
}

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

.note-editor.note-frame .note-editing-area {
    overflow: visible;
}

.feeds--item.own-bubble .teamMember-highlight {
    color: #B07B2A;
}

.teamMember-highlight {
    color: #EFAC00;
}

.mentions-input-box .mentions-autocomplete-list {
    margin-top: -25px;
}

.workplace-sticky .workplace-sticky-header{
    padding: 24px 40px 8px; 
    border-bottom: 1px solid #C0BFBB;
}

.workplace-sticky .list-group.list-email.list-gray {
    /*height: calc(100vh );*/
    min-height: 600px;
    background: #fff
}

.workplace-sticky .list-group.list-email.list-gray a {
    padding-right: 100px;
    margin: 0 15px 10px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
    color: #000;
}

.workplace-sticky .list-group-item {
    border: none;
}

.workplace-sticky .list-email p {
    color: #000;
}

.img-notification .error {
    max-height: 100px;
    overflow: auto;
    color: red;
    font-size: 10px;
}

.img-notification .error p {
    line-height: 11px;
}

.workplace--header {
    min-height: 60px;
    position: relative;
    z-index: 201;
    padding-top: 10px;
}

.workplace--header .timeline-filter--panel {
    position: absolute;
    margin: -12px 56px 0 10px;
    right: 0;
    z-index: 2;
    top: 55%;
}

.workplace--header .timeline-filter--panel .badge{
    width: 10px;
    height: 10px;
    left: 28px;
    top: -0px !important;
}

.search-filter-container .search-filter-wrapper .badge{
    width: 10px;
    height: 10px;
    left: 32px;
    top: 5px !important;
}

.workplace--archive-header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    min-height: 42px;
    z-index: 201;
    background: #FFD200;
}

.workplace--archive-header .archive-text{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.timeline-filter--panel .icon-Basics_Filter_filtered .path1:before{
    color: #FFFFFF;
}

.timeline-filter--panel .icon-Basics_Filter_filtered .path1,
.timeline-filter--panel .icon-Basics_Filter_filtered .path2{
    margin: 0;
}

.workplace--header .project-contextual--menu {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    font-size: 20px;
    z-index: 2;
    right: 40px;
}

.workplace-sticky {
    top: 0;
    height: 100vh;
    min-height: 600px;
}

.list-group-item.project-item.active p,
.list-group-item.project-item.active .momentOfDate {
    color: #000;
}

.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;
}

#offcanvas-feed-filter .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;
}

#offcanvas-feed-filter .feed-filtering-reset{
    width: 50%;
    transform: translate(50%,-50%);
}

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

.search-filtering-wrapper .search-filtering-detail i{
    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;
}

.section-scroll {
    height: 79vh !important;
    overflow: auto;
    position: relative
}


/*project module*/

.project--item h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    padding: 0 30px 0 0 !important;
    margin: 10px 0 10px 0;
}


.project--item {
    background: #fff !important;
    font-size: 15px;
    line-height: 19px;
    box-shadow: none;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;
    padding:  24px;

}

.project--item.red-bar{
  background: #FFF4F4 !important;
  border: 1px solid #EE4056;
}

.project--item .project-card{
    padding: 0 !important;
}
.project--item  .contextual-menu--icon{
    position: absolute;
    top: 24px !important; 
    right: 24px;
    z-index: 2;
}

.project-item .read-icon {
    position: absolute;
    left: 10px;
    top: 43%;
    font-size: 16px
}

.project--item .dropdown-menu{
    background: #F5F5F5 !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    overflow: hidden;
}
.project--item .dropdown-menu>li>a{
    font-weight: 400 ;
    font-size: 14px;
    padding: 10px;
}
.project--item .dropdown-menu>li>a:hover{
    box-shadow: inset 0px 0px 20px rgba(79, 57, 0, 0.2);

}
.project-list-txt--icon{
    position: relative;
    padding-left: 25px;
    margin-bottom: 4px;

    display: flex;
    flex-wrap: wrap;
    align-content: center;

    color: #75716B;

    min-height: 20px;
}

.project-list-txt--icon i{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
    font-weight: 400;
}

.verticalLine {
  border-left: 2px solid #C0BFBB;
  margin: 0px 8px;
}

.project-value-container{
  display: flex;
  align-items: center;
}

.project-value-container i{
  position: relative;
  color: #C0BFBB;
}

.project-list-view--services .project-value--green-tick i,
.project-list-view--services .project-value--grey-untick i,
.project-list-view--services .project-value--slash-text i,
.project-list-payments .project-value-container i{
  font-size:1.3em;
  display:inline-block;
  vertical-align: middle;
  margin-right:5px;
}

.project-list-payments a{
  display:inline-block;
}

.project-list-payments a:hover{
  text-decoration: none;
}

.project-list-payments-cta i{
  margin-left:10px;
  color:#000;
}

.project-list-view--services h4{
  display:inline-block;
  color:#000;
}

.project-list-view--services .project-value--green-tick i,
.project-value-container .project-value--green-tick i,
.payment-task--status.project-value--green-tick i{
  color: #00B485;
}

.project-value--grey-untick{
  color: #C0BFBB;
}

.project-value--slash-text h4{
  color:#C0BFBB;
  text-decoration: line-through;
}

.project-value-container .project-value--detail-progress i,
.payment-task--status.project-value--detail-progress i{
  color: #F16321
}

.project-value-container .project-value-panel{
  margin-right: 4px;
}

.project-value-container .project-value-panel .project-value-panel--type{
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: #75716B;
}

.project-value-container .project-value-panel .project-value-panel--due-date{
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #75716B;
}

.project-value-container .project-value-panel.payment-due--red{
  color: #EE4056;
}

.project-value-container .project-value-panel.payment-due--red .project-value-panel--type,
.project-value-container .project-value-panel.payment-due--red .project-value-panel--due-date{
  color: unset;
}

.project-item-keylog--panel {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 5px 10px 5px 30px;
    font-size: 12px;
    position: relative;
    margin: 10px 0;
}

.project-item-keylog--panel i {
    color: #EFAC00;
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 16px;
    margin-top: -7px;
}

.project-item-keylog--panel label {
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
    margin-bottom: 0;
}

.project-card--action-panel{
  position:absolute;
  right:20px;
  top:25px;
  z-index: 2;
}

.project-quick-action--btn{
/*    position: absolute; */
  position:relative;
  width: 25px; 
  height: 25px; 
  z-index: 2; 
  display:inline-block;
  text-align: center;
  vertical-align: middle;
  /*right: 30px; 
  top: 30px;*/
}

.project-quick-action--btn.unsilent:before{
    position: absolute;
    top: -5px;
    right: 50%;
    width: 1px;
    height: 30px;
    content: "";
    background: #C0BFBB;
    transform: translateX(50%) rotate(35deg);
}

.project-quick-action--btn:hover{
    text-decoration: none;
    color: #EFAC00;
}

.project-quick-action--btn.unsilent{
    color: #C0BFBB;

}

.project-quick-action--btn.unsilent:hover{
    color: #EFAC00;
}

.project-quick-action--btn.unsilent:hover:before{
    background: #EFAC00;
}

.project-quick-action--btn i{
    font-size: 20px;
}

.project-missing-team--no-pointer-cursor{
  cursor: default;
}

.project-missing-team--btn{
/*  position: absolute; */
  width: 25px; 
  height: 25px; 
  z-index: 2; 
/*  right: 60px; */
/*  top: 30px;*/
  display:inline-block;
  vertical-align: middle;
}

.project-missing-team--btn:hover{
  text-decoration: none;
}

.project-missing-team--tooltip{
  position: absolute; 
  top: 40px; 
/*  right: -40px;*/
  right:0;
  z-index: 3;
  min-width: 164px;

  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: #75716B;
}

.project-missing-team--btn:hover .project-missing-team--tooltip{
  display: flex;
}

.project-missing-team--btn i{
  font-size: 20px;
  color: #EE4056;
}

.list-email {
    margin-bottom: 0 !important;
}

.list-email h5 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;

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

.list-profile{
    display: flex;
    margin-bottom: 8px;
}

.list-profile .icon-Basics_Profile{
    margin-right: 8px;
}

.list-email p {
    font-size: 12px;
    line-height: 15px;
}

.project-item .list-email a {
    padding-right: 120px;
}

.project-item .list-email a.active {
    background: #f5f5f5;
    color: #555555;
}

#postUpdateModal textarea {
    width: 100%;
    border: 1px solid #e5e6e6;
}

.widget--item .chat-bar{
    position: absolute;
}

.timelineStructure {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

/*.timeline-dragdrop {
    position: absolute;
    width: 100%;
    height: 120%;
    background: #FFD200;
    z-index: 2000;
    top: 0;
    left: 0;
    text-align: center;
    color: #fff;
    display: none;
}*/

.timeline-dragdrop {
    position: absolute;
    width: 100%;
    background: #FFD200;
    z-index: 2000;
    bottom: 0;
    top: 0;
    left: 0;
    text-align: center;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 24px 40px;
}

.reply-task--panel .timeline-dragdrop,
#offcanvas-post .timeline-dragdrop{
    position: fixed;
}

.timeline-dragdrop.showFlex{
    display: flex;
}

.timeline-dragdrop .timeline-dragdrop-content{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;

    display: flex;
    align-items: center;
    text-align: center;

    color: #000000;

    border: 1px dashed #000000;
    box-sizing: border-box;
    border-radius: 12px;

    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.timeline-description {
    word-wrap: break-word
}

.timeline-description a {
    text-decoration: underline;
}

.timeline-description+[data-readmore-toggle]{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.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;
}

.subtask--item.flag--card{
    padding: 24px !important; 
    background: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.subtask--item.flag--card .flag-remark,.task--card .flag-remark{
    background: #FFF4F4;
    border:  1px solid #EE4056;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 16px;
    color: #EE4056;
}

.subtask--item.flag--card .flag-remark h4,.task--card .flag-remark h4{
    font-weight: 700;
    color: #EE4056;
    padding: 0;
    margin: 0;
}

.timeline-post--panel {
    display: none;
}

.timelineHTML {
    height:  calc(100vh - 144px);
    min-height: 1px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: url("../images/workplacebg.png") repeat;
    /*height: 100%*/
}

.timelineHTML.empty-item{
    display: flex;
    align-items: center;
    justify-content: center;
}

.timelineHTML.full-height{
    height: 100%;
}

.widget--item .timelineHTML {
    height:  calc(100vh - 144px);
    min-height: 500px;
}

/*.timelineHTML.editing{
    height:  calc(100vh - 288px);
}*/

.assets-navigation--panel {
    display: flex;
    text-align: center;
}

.assets-navigation--panel a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    flex: 1;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
}

.assets-navigation--panel a:hover {
    text-decoration: none;
}

.assets-navigation--panel a.active {

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

    border-bottom: 2px solid #EFAC00;

    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.assets-content--panel{
    margin-top: 16px;
    height: calc(100% - 50px);
    padding-right: 16px;
    padding-left: 4px;
    overflow-y: auto;
}

.assets-content--panel::-webkit-scrollbar-thumb{
    background-color: #EFAC00;
}

.assets-content--panel .assets--tab:first-child {
    display: block;
}

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

.assets-content--panel .assets--tab .assets-wrapper{
    padding-left: 8px;
    padding-right: 8px;
}

.assets-content--panel .assets--tab .assets-wrapper{
    padding-bottom: 16px;
}

.assets-content--panel .assets--tab .assets-row2{
    display: grid;
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    /*grid-column-gap: 16px;*/
    /*grid-row-gap: 8px;*/
}

.assets-content--panel .assets--tab .assets-row2:before{
    content: none;
}

.assets-content--panel .assets--tab .assets-wrapper2{
    /*padding: 0;*/
    padding-bottom: 8px;
}

.assets-wrapper2 .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;

    width: 100%;
    height: 100%;
    justify-content: flex-start;
}

.cost-estimation-action--html {
    height: calc(100vh - 64px);
    min-height: 400px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.project-hood--panel .timelineHTML {
    max-height: calc(100vh - 147px);
    /*min-height: 520px*/
    /*padding-bottom: 100px;*/
}


/*widgets*/

.no-widget {
    position: relative;
    padding: 40px 20px;
}

.no-widget .default-img{
    position: relative;
    margin-top: 20px;
    margin-bottom:  20px;
    display: block;
    margin-left: auto ;
    margin-right: auto ;
    width:  120px;
}

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

.widget--item {
    background: #fff !important;
    font-size: 15px;
    line-height: 19px;
    box-shadow: none;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.widget--item h3.widget-name {
    font-size: 20px;
    line-height: 25px;
    color: #000;
    font-weight: 700;
    margin: 0;
    padding: 15px 30px 15px 0;
    position: relative;
}

.widget--item h3 a,.widget--item h3 a:hover {
    position: absolute;
    right: 0px;
    text-decoration: none;
}

.widget--header {
    text-align: left;
    padding: 0 15px;
}

.widget--footer{
  position: absolute;
  bottom: 0;
  border-top: 1px solid #C0BFBB;
  width: 100%;
  height: 50px;
}

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

.widget--item:first-child {
    margin-top: 0;
}

.client-container .widget--item{
  height: 764px;
}

.owner-widget--item {
    padding: 20px 10px;
    display: block;
}
.owner-widget--item hr{
  margin: 15px 0 20px 0;
}
.owner-widget--item .project-status--pill {
    border: 1px solid #C0BFBB;
    display: inline-block;
    font-size: 14px;
    padding: 0 15px 0 30px;
    line-height: 34px;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    position: relative;
}

/*To prevent additional gap created by the inline block*/
.owner-widget--item .project-status--pill{
/*    display: inline-flex; */
}

.owner-widget--item .project-status--pill.handovered {
    border:  1px solid #034126;
    color: #034126;
}
.project-status-tbd--pill{
    
    display: inline-block;
    font-size: 14px;
    padding: 0 15px 0 15px;
    line-height: 34px;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    position: relative;
    background: #E5E5E1 !important;
    color: #75716B;
    border: none !important;
}

.owner-widget--item .project-status--pill i{
    position: absolute;
    left: 10px;
    top:  10px;
    
}
.project-status-pill{
    display: inline-block;
}
.project-status-pill i{
    position: absolute;
    left: 7px;
    top:  7px;
    
    
}

.owner-widget--item .project-status--pill.running span{
    background: #FFD200;
    border-color: #FFD200;
}

.owner-widget--item .project-status--pill.completed span{
    background: #00B485;
    border-color: #00B485;
}
.owner-widget--item .project-status--pill.archived span{
    background: #C0BFBB;
    border-color: #C0BFBB;   
}

.owner-widget--item .avatar {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px solid black;
    margin: 20px auto;
}


.owner-widget--item .owner-name{
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 5px 0;
}

.owner-cta--panel{
  max-width:500px;
  width:90%;
  margin:0 auto;
}

.owner-cta--panel .btn{
    min-width:  170px;
}

.owner-cta--panel .btn i{
    position: relative;
    top: 2px;
    font-size: 17px;
}

.owner-details--item{
    position: relative;
    margin-bottom:5px;
    display:inline-block;
    padding:0 5px;
}

.owner-details--item i{
    position: relative;
    top: 3px;
    font-size: 18px;
    display: inline-block;
    margin-right: 5px;
    color: #EFAC00;
}

.project-status--planning-label{
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #000000;

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  min-height: 350px;
}

.key-widget--item {
    padding: 0;
    text-align: center;
    display: block;
}

.key-widget--item a {
    font-weight: 700;
}

.project-cost-widget--item {
    text-align: left;
    display: block;
    
}

.project-cost-widget--item .costing-list{
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 50px;
  min-height: 500px;
  padding: 0 20px;
}

.project-cost-widget--item .costing-list.without-footer{
  border-bottom: 1px solid #E5E5E1;
  margin-bottom: 24px;
}
.project-cost-widget--item .costing-list .costing--item{
  border-top: 1px solid #E5E5E1;
  padding: 20px 0;
}
.project-cost-widget--item .costing-list .costing--item:first-child{
  padding-top: 0px;
  border-top: 0;
}
.project-cost-widget--item .costing-list .costing--item:last-child{
  border-bottom: 0;
}
.project-cost-widget--item .costing-list .costing--item .remarks{
  border-radius: 6px;
  border: 1px solid #C0BFBB;
  background: #F5F5F5;
  padding: 8px;
  margin-top: 10px;
  overflow-wrap: break-word;  
  word-wrap: break-word; 
  word-break: break-word;

}
.project-cost-widget--item .costing-list .costing--item .costing-details{
  margin-top: 10px;
  color: #75716B;
}
.project-cost-widget--item .costing-list .costing--item .costing-booking-fee{
  font-style: italic;  
  color: #75716B;
}
.project-cost-widget--item .costing-list .costing--item .costing-details span{
  display: inline-block;
  margin-right: 10px;
}
.project-cost-widget--item .widget--footer{
  padding-top: 5px;
}
.project-cost-widget--item .btn-primary:hover{
  text-decoration: none;
}
.project-info--avatar{
    width: 30px; height:30px; -webkit-border-radius: 100px;
                                        -moz-border-radius: 100px;
                                        border-radius: 100px; display: inline-block; border: 1px solid black
}

.task-widget--item {
    min-height: 500px;
    text-align: center;
    position: relative;
}
.widget-no-task{
    min-height:  120px;
    display: block;
    margin-top: 100px;
    font-weight: 700;
    position: absolute;
    top: 240px;
    left: 50%;
    margin-left: -114px;
}
.widget-no-task img{
    display: block;
    margin: 0 auto;
}


.checklist--item{
    padding:  0 0 20px 0;
}
.checklist--item input[type=button],.checklist--item input[type=submit],.checklist--item input[type=button],
.checklist--item input[type=submit]:hover,.checklist--item input[type=button]:hover,
.checklist--item input[type=submit]:focus,.checklist--item input[type=button]:focus
{
    width:  100%;
    height: 30px;
    line-height: 28px !important;
    padding: 5px;
    margin-top:  20px;
    min-width: 100px !important;
}
.checklist--item .checklist-with-icon{
    padding-left:  25px;
    color: #000;
    font-weight: 600;
    line-height: 16px;
    margin-bottom: 10px;
    min-height: 24px;
    display: inline-block;

}
.checklist--item .checklist-with-icon i{
    position: absolute;
    left: 10px;
    top:  2px;
    color: #00B485;
    font-size: 20px;
}

.checklist--item strike,
.checklist--item .checklist-with-icon.uncheck{
    color: #C0BFBB;
    line-height: 16px;
    margin-bottom: 10px;
    min-height: 24px;
    display: inline-block;
}

.checklist--item .checklist-with-icon.uncheck,
.checklist--item .checklist-with-icon.uncheck i{
    color: #C0BFBB;
}

.edit-checklist--view{
    display: none;
}

.checklist--note{
  margin: 16px 0px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}

.project-info-widget--item{
    min-height: 300px;
}

@media (max-height: 500px) {
    .project-hood--panel .timelineHTML {
        max-height: calc(500px - 83px);
        min-height: calc(500px - 83px);
    }
    .project-detail--sidepanel {
        height: calc(100vh) !important
    }
}

#postUpdateModal .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100% !important;
}

.pma-timeline {
    margin: 10px 10px 0 10px;
    padding: 0;
    list-style: none;
    /*transform: rotate(180deg);*/
}

.reply-task--panel .pma-timeline,
#offcanvas-post .pma-timeline {
    margin: 24px 0px 0px 0px;
    padding-bottom: 132px;
    /*flex: 1 1 auto;*/
}

.reply-task--panel .pma-timeline li.own-bubble,
#offcanvas-post .pma-timeline li.own-bubble {
    width: 80%;
    margin-right: 10px;
    margin-left: 56px;
}

.reply-task--panel .pma-timeline>li,
#offcanvas-post .pma-timeline>li {
    margin-left: 80px;
    margin-right: 30px;
}

.reply-task--panel .feed-profile--panel,
#offcanvas-post .feed-profile--panel {
    left: -50px;
}

.pma-timeline>li {
    position: relative;
    background: #fff;
    padding: 15px;
    color: #000;
    flex: 1;
    margin-left: 53px;
    margin-right: 140px;
    margin-bottom: 8px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    /*z-index: 200;*/
}

.pma-timeline>li:last-child{
    margin-bottom: 24px;
}

.workplace-widget--item .pma-timeline>li {
    margin-left: 36px;
    margin-right: 48px;
}

.workplace-widget--item .pma-timeline li.own-bubble{
    width: 80%;
    margin-left: 36px;
}

.pma-timeline .feeds--item.focused-area{
    z-index: 500;
}

.pma-timeline>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;
}

.pma-timeline>li hr {
    border-top: 1px solid #C0BFBB;
}

.pma-timeline>li.own-bubble hr {
    border-top: 1px solid #000;
}

.pma-timeline .new--item h3 {
    color: #EFAC00;
}

.pma-timeline .new--item h3:before,
.pma-timeline .new--item h3:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid #EFAC00;
    margin: auto;
}

.pma-timeline .new--item h3:before{
    margin-right: 8px;
}

.pma-timeline .new--item h3:after {
    margin-left: 8px;
}

.pma-timeline h3 {
    font-size: 15px;
    display: flex;
    flex-direction: row;
    font-weight: 700;
    color: #75716B;
}

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

.pma-timeline h3:before {
    margin-right: 10px
}

.pma-timeline h3:after {
    margin-left: 10px
}

.reply-task--panel .pma-timeline h3,
#offcanvas-post .pma-timeline h3{
    margin-left: 31px;
    margin-right: 15px;

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

.reply-task--panel .pma-timeline h3:before,
.reply-task--panel .pma-timeline h3:after,
#offcanvas-post .pma-timeline h3:before,
#offcanvas-post .pma-timeline h3:after {
    border-bottom: 0.5px solid #75716B;
}

.reply-task--panel .pma-timeline .plain--item.new--item h3,
#offcanvas-post .pma-timeline .plain--item.new--item h3{
    color: #EFAC00;
}

.reply-task--panel .pma-timeline .plain--item.new--item h3:before,
.reply-task--panel .pma-timeline .plain--item.new--item h3:after,
#offcanvas-post .pma-timeline .plain--item.new--item h3:before,
#offcanvas-post .pma-timeline .plain--item.new--item h3:after {
    border-bottom: 0.5px solid #EFAC00;
}

.pma-timeline li.chat-item {
    margin-left: 0;
    padding: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.pma-timeline li.own {
    margin-left: auto;
    margin-right: 40px;
}

.pma-timeline li.animate:before {
    content: "";
    position: absolute;
    width: calc(100% + 25%);
    top: -10px;
    background: rgba(255, 210, 0, 0.5);
    height: calc(100% + 20px);
    left: calc(-20% + 10px);
    z-index: 1000;
    transition: all 0.8s ease;
    animation: backgroundHighlight 1s infinite
}

@keyframes backgroundHighlight {
    from {
        background: rgba(255, 210, 0, 0.5);
    }
    to {
        background: rgba(255, 210, 0, 0.01);
    }
}

.pma-timeline li.own-bubble {
    margin-left: 0;
    margin-right: 60px;
    background: #FFD200;
    color: #000;
    border: none;
    margin-left: auto;
}

.pma-timeline li.first-bubble{
    margin-top: 16px;
}

.pma-timeline li.own-bubble .feed-profile--panel {
    left: auto;
    /*border: 2px solid #fff;*/
    right: -56px;
}

.pma-timeline li.own-bubble.first-bubble:after {
    /*position: absolute;
    width:  27px;
    height: 30px;
    z-index: 2;
    content: "";
    background: #000;
    border-radius: 12px;
    transform: rotate(-180deg);
    right: 0;*/
    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);
}

.pma-timeline li.system--item {
    /*background: rgba(255, 245, 229, 1);*/
    margin-left: 17%;
    margin-right: 17%;
    background: #E7F7FF;
    border: 1px solid #32B1E6;
    border-radius: 12px;
    margin-bottom: 16px;
}

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

.pma-timeline li.temporary-plain--item,
.pma-timeline li.plain--item {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0;
    border: none;
    background: none;
}

/*.pma-timeline li.plain--item.empty--item{
    position: absolute;
    top: 50%;
}*/

.pma-timeline li.system--item:after,
.pma-timeline li.system-error--item:after {
    display: none;
}

.pma-timeline li.system-error--item {
    background: rgba(252, 231, 231, 1);
}


/*.pma-timeline li:not(.system--item),.pma-timeline li:not(.system-error--item),.pma-timeline li:not(.plain--item),.pma-timeline li.own-bubble{*/

.pma-timeline li.own-bubble {
    width: 80%;
}

.main-post-description+[data-readmore-toggle],
.timeline-description+[data-readmore-toggle] {
    font-weight: bold;
    text-decoration: underline;
    display: inline-block;
    /*margin-top: 20px;*/
    color: #EFAC00;
}

.pma-timeline li.own-bubble .main-post-description+[data-readmore-toggle],
.pma-timeline li.own-bubble .timeline-description+[data-readmore-toggle] {
    color: #B07B2A;
}

.pma-timeline li.own-bubble .timeline-footer {
    color: #000;
    /*margin-top:  40px;*/
}

.pma-timeline 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;
}

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

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

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

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

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

.show-replies--btn:hover {
    text-decoration: none;
}

.pma-timeline li .timeline-footer,
.pma-timeline li.system--item .timeline-footer,
.pma-timeline li.system--item hr,
.pma-timeline li.system-error--item .timeline-footer,
.pma-timeline li.system-error--item hr {
    color: #75716B;
    border-color: #000;
}

.updates-done--panel .cta-container,
.pma-timeline>li .cta-container{
    display: none;
    /*display: flex;*/
    position: absolute;
    bottom: -16px;
    right: 0;
    margin-right: 24px;
    z-index: 300;
}

.updates-done--panel .cta-container{
    margin-right: 16px;
}

.updates-done--panel:hover .cta-container,
.pma-timeline>li:hover .cta-container{
    display: flex;
}

.pma-timeline .feeds--item.focused-area .cta-container{
  display: none;
}

.updates-done--panel .cta-container .show-replies--btn,
.pma-timeline>li .cta-container .show-replies--btn{
    padding: 0;
}

.updates-done--panel .cta-container .cta-button,
.pma-timeline>li .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;
}

.updates-done--panel .cta-container .cta-button.darkBg,
.pma-timeline>li .cta-container .cta-button.darkBg{
    background: #000000;
}

.updates-done--panel .cta-container .cta-button.redBg,
.pma-timeline>li .cta-container .cta-button.redBg{
    background: #EE4056;
}

.updates-done--panel .cta-container .cta-button.yellowBg{
    background: #FFD200;
}

.updates-done--panel .cta-container .cta-button:first-child,
.updates-done--panel .cta-container .cta-button:not(:last-child),
.pma-timeline>li .cta-container .cta-button:first-child,
.pma-timeline>li .cta-container .cta-button:not(:last-child){
    margin-right: 8px;
}

.cta-container .cta-button i.white-color{
    color: white;
}

.floating-bar-container{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.floating-bar-container .floating-bar-wrapper{
    position: fixed;
    width: inherit;
    top: 80px;
    z-index: 200;
    cursor: pointer;
}

.floating-bar-container .floating-bar-wrapper .floating-bar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;

    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;
}

.workplace-widget--item .floating-bar-container .floating-bar-wrapper{
    position: absolute;
    top: 68px;
}

.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%;
}

.workplace-delete-icon-container{
  height: 40px;
  width: 40px;
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  cursor: pointer;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #EE4056;

  position: absolute;
  right: 24px;
  top: 24px;
}

.workplace-delete-icon-container .workplace-delete-icon{
  width: unset;
}

.align-self-center {
    align-self: center !important;
}

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

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

.feed-content--panel .contextual-menu--icon {
    top: 0;
    position: absolute;
}

.feeds--link,
.feeds--link:hover {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    display: inline-block;
    background: #FFFFFF;
    padding: 3px 15px 0 15px;
    height: 32px;
    text-decoration: none;
    position: relative;
}

.feeds--link i {
    margin: 0 5px 0 0;
    font-size: 18px;
    position: absolute;
    left: 15px;
    top: 6px;
}

.pma-timeline li.system--item .feeds--link,
.pma-timeline li.system-error--item .feeds--link {
    padding-left: 40px;
}

.pma-timeline li.system--item .feeds--link i {
    color: rgba(10, 168, 158, 1);
}

.pma-timeline li.system-error--item .feeds--link i {
    color: rgba(198, 40, 40, 1);
}

.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;
}

.timeline-user--name {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.timeline-user--designation {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #75716B;
    margin-bottom: 8px;
}

.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;
    margin-bottom: 8px;
}

.own-bubble .timeline-user--name,
.own-bubble .timeline-user--designation {
    color: #000;
}

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

.updates-done--panel .timeline-media-details{
    margin: 0;
}

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

.updates-done--panel .timeline-media-details .feed-media-container{
    /*background: #FFFFFF;*/
}

.reply-task--panel .pma-timeline .updates-done--panel .timeline-media-details .feed-media-container{
    margin-bottom: 16px;
}

.updates-done--panel .timeline-media-details .feed-media-container.document{
    background: transparent;
}

.updates-done--panel .feed-media-container.document .icon-wrapper{
    color: #FFD200;
}

.feeds--item.task--item .feed-media-container.document .icon-wrapper,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container.document .icon-wrapper{
    color: #EFAC00;
}

.updates-done--panel .feed-media-container.document .text-wrapper{
    color: #FFFFFF;
}

.feeds--item.task--item .feed-media-container.document .text-wrapper,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container.document .text-wrapper{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

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

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

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

.feeds--item.task--item .timeline-media-details .feed-media-container.document,
.reply-task--panel .timeline-media-details .feed-media-container.document{
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.widget--item .timeline-media-details .feed-media-container.document{
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

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

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

.updates-done--panel .feed-media-container .feed-media-wrapper{
    padding-right: 4px;
    background: #FFFFFF;
}

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

.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:first-child,
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:first-child .social-media--item{
    -webkit-border-top-left-radius: 12px;
    -moz-border-radius-topleft: 12px;
    border-top-left-radius: 12px;
}


.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:first-child,
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:first-child .social-media--item.document,
.updates-done--panel .feed-media-container .feed-media-wrapper:first-child,
.updates-done--panel .feed-media-container .feed-media-wrapper:first-child .social-media--item.document{
    -webkit-border-top-left-radius: 500px;
    -moz-border-radius-topleft: 500px;
    border-top-left-radius: 500px;
}


.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:last-child,
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:last-child .social-media--item:not(.document),
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:only-child,
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper:only-child .social-media--item:not(.document),
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper.last-child,
.updates-done--panel:not(.pma-timeline .updates-done--panel) .feed-media-container .feed-media-wrapper.last-child .social-media--item{
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topright: 12px;
    border-top-right-radius: 12px;
    background: transparent;
}

.feeds--item.task--item .feed-media-container .feed-media-wrapper,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper{
    background: transparent;
}

.feeds--item.task--item .feed-media-container .feed-media-wrapper,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.feeds--item.task--item .feed-media-container .feed-media-wrapper:only-child,
.feeds--item.task--item .feed-media-container .feed-media-wrapper:only-child .social-media--item,
.feeds--item.task--item .feed-media-container .feed-media-wrapper.last-child,
.feeds--item.task--item .feed-media-container .feed-media-wrapper.last-child .social-media--item,
.feeds--item.task--item .feed-media-container .feed-media-wrapper,
.feeds--item.task--item .social-media--item,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper:only-child,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper:only-child .social-media--item,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper.last-child,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper.last-child .social-media--item,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper,
.reply-task--panel .pma-timeline .updates-done--panel .social-media--item{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.feeds--item.task--item .feed-media-container .feed-media-wrapper .social-media--item.document,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container .feed-media-wrapper .social-media--item.document{
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

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

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

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

.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: 32.5px;*/
    /*height: 32.5px;*/
    width: 16px;
    height: 16px;
}

.assets-content--panel .assets--tab .assets-wrapper .play-icon-wrapper,
.img-table .play-icon-wrapper{
    width: 25px;
    height: 25px;
}

.assets-content--panel .assets--tab .assets-wrapper .play-icon,
.img-table .play-icon{
    width: 16px;
    height: 16px;
}

.timeline-media--item {
    height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.contextual-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    z-index: 2;
    position: absolute;
    display: none;
    width: 100px;
    right: 0;
}

.contextual-menu li {
    border: none;
    background: #fff;
    margin: 0;
    padding: 0 5px;
    color: #000;
}

.contextual-menu--panel {
    position: absolute;
    right: 20px;
}

.contextual-menu--icon {
    position: absolute;
    /*right: 0;*/
    /*z-index: 1;*/
    top: 5px;
}

.contextual-menu--icon a {
    display: block;
    width: 100%;
    height: 100%;
}

.CE-list .contextual-menu--icon a {
    padding-top: 3px;
}

.CE-list .action-panel .contextual-menu--icon {
    top: -2px;
}


/*header*/


/*notification */

.header-nav-options .dropdown .dropdown-menu {
    width: 350px;
    height: 300px;
    overflow: auto;
}

.header-nav-options .dropdown-header {
    font-size: 20px;
    color: #000;
    opacity: 1;
    padding: 10px 10px 0 10px;
}


/*.notification--item.unread{
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
}
.notification--item{
  background: rgba(83, 88, 88, 0.15) !important;
  position: relative !important;
  padding: 10px !important;
  background: #fff !important;
  color: #313534 !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 3px !important;
  border-color: rgba(83, 88, 88, 0.15) !important;
  line-height: 12px !important
}
.notification--item strong{
  
  padding-right: 65px;

}
.notification--item small{
  display: block;
  margin-bottom: 10px;
  white-space: initial;
}

.notification--item .notification-date{
  display: none
}

.notification--item .notification-date.show {
  font-size: 12px;
  
  display: inline !important;
  
}
*/

.dropdown-menu .load-notification {
    text-align: center;
}


/*.notification--item.unread:before{
  background: #0aa89e !important
}*/


/*.notification--item.unread:before{
  background: none
}
.notification--item:before{
  background: none !important
}*/


/*.notification--item .notification-receiver--panel strong{
  
  align-items:center;
  margin-top: 0px;
  
  height: 40px;
  vertical-align: middle;
  display: flex;

}*/







.headerbar-right {
    background: #fff;
    margin: 10px 25px 0 0;
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px
    /*margin-right: 12px;*/
}



.header-nav>li>a.btn.btn-icon-toggle.btn-default {
    margin: 0 10px;
}

.header-nav-options .dropdown .dropdown-menu {
    top: 62px;
}

header#header {
    background: none;
    box-shadow: none;
    left: auto !important;
    right: 0;
    width: 300px;
}

.loginpage header#header {
    left: 0 !important;
}

#header.outside {
    background: none;
    box-shadow: none;
    position: absolute;
}


/*content*/

#content {
    padding-top: 0;
}

section:first-child {
    padding: 0;
}


/*overall*/

#base {
    min-width: 1100px;
    /*min-height: 500px;*/
    min-height: 100vh;
    overflow: auto;
    /*padding-bottom: 100px;*/
}

.info {
    background: #d4e9fa
}

.header-nav-profile .dropdown .profile-info {
    font-size: 15px;
    line-height: 19px;
    font-weight: 700;
    opacity: 0;
      text-shadow: none;
      -webkit-transition: all 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
      -o-transition: all 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
      transition: all 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
}

.menubar-visible .profile-info {
  left: 0;
  opacity: 1 !important;
}

.header-nav-profile .dropdown .profile-info small {
    font-weight: 400
}

.profile-img {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 208px;
    width: 208px;
    margin-bottom: 20px;
}

.header-profile-img {
    border: 1px solid #fff;
    margin: 0 10px 0 4px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    vertical-align: middle;
}

.ui-autocomplete {
    z-index: 2000;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ui-menu-item {
    box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.25);
}

.card-foot {
    min-height: 50px
}

.card-foot .total-all {
    display: block;
    padding: 10px 0;
    text-align: center;
}

.card-foot .total-all:hover {
    text-decoration: none
}

.card-head.card-head-xs header {
    padding-top: 10px;
}

.close-owner--btn,
.close-property--btn {
    position: absolute;
    right: 0px;
    top: 0px;
}

.modal.vcenter {
    
    text-align: center;
    padding: 0!important;
    
}
.modal .vcenter{
    max-width: 400px;

}

.modal.vcenter:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
    /* Adjusts for spacing */
}

.modal-dialog.vcenter {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.modal-open.menubar-first #menubar {
    z-index: 11
}

.modal-backdrop {
    height: 100%;
    z-index: 1005;
    position: fixed;
    z-index: 5000;
}

.modal-dialog {
  z-index: 2000
}

.modal-dialog.m {
    min-width: 760px;
    width: 50%;
}

.modal-dialog.xl {
    min-width: 1000px;
    max-width: 100%;




    width: 100%;
    height: 100%;
    margin: 0;
    padding: 80px;
}

.modal-dialog.med{
    min-width: 1000px;
    max-width: 500px;




    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 80px;
}
.vcenter .modal-content{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    border: none;
    
    
}

#editRemark .modal-dialog.modal-lg .modal-content,
.modal-dialog.xl .modal-content{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    height: 100%;
    min-height: 100%;
    padding-top: 50px;
    padding-bottom: 80px;
    
}


.modal-dialog.med .modal-content{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    height: 100%;
    min-height: 100%;
    padding-top: 10px;
    padding-bottom: 80px;
    
}

.modal-content-scroll{
    height: 100%;
    overflow-y: auto; 
}

#addNewMilestone .modal-content-scroll{
  overflow-y: initial;
}

#raiseInvoice .modal-dialog{
  max-width:800px;
}

#raiseInvoice .popup-text{
  margin-bottom:20px;
}

#raiseInvoice .raise-invoice--remark{
  text-align:left;
  margin-bottom:0;
}

#raiseInvoice .raise-invoice--remark label{
  color:#75716B;
}

#raiseInvoice .raise-invoice--remark textarea{
  min-height:initial;
  height:40px;
}

.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;
}

.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;
}

.raise-invoice--payment-term-update{
  padding-bottom:20px;
}

#editRemark .modal-dialog.modal-lg .modal-content .modal-footer,
.modal-dialog.xl .modal-content .modal-footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    border-top: 0;
}

#editRemark .modal-dialog.modal-lg .modal-content .modal-header,
.modal-dialog.xl .modal-content .modal-header{
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 0;
    border-bottom: 0;
    display: block;
}



.modal-dialog.xl .modal-content .modal-header.flex{
  display: flex;
}
.modal-header .close{
    font-size: 30px;
}
.modal-footer{
    background: #fff;
    -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;
}

.modal-header.custom-modal-header{
  border: unset;
  padding: 40px 40px 0px;
}
.modal-body.custom-modal-body{
  padding: 0px 16px;
}
.modal-body.custom-modal-body-2{
  padding: 0;
  margin: 48px 40px;
}
.custom-modal-footer{
  padding: 0px 40px 40px;
  border: none;
}
.btn-secondary--custom{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  border: 1px solid #000000;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  min-height: 40px;
  min-width: 160px;

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

.btn-secondary--custom:hover{
  text-decoration: none;
}

.btn-primary--custom{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  border: none;
  background: #FFD200;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  min-height: 40px;
  min-width: 160px;

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

.duration-panel{
  display: flex;
  align-items: center;
  gap: 8px;

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

.duration-panel .duration-panel--input-wrapper{
    display: flex;
    flex-direction: column;
    position: relative;
}

.duration-panel .duration-panel--input-wrapper .help-block{
    position: absolute;
    display: block;
    bottom: -16px;
    width: 120px;
    color: #f44336;
}

.duration-panel .duration-panel--input{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

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

.duration-panel .duration-panel--input.error{
  border: 1px solid #f44336;
}

.payment-reminder--horizontal-line{
  border: none;
  height: 1px;
  background: #E6E5E1;
  margin: 24px 0px;
}

.setting-container{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.setting-container .setting-wrapper{
  width: calc(50% - 8px);
}

.payment-reminder-container{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
  background: #F5F5F5;
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.payment-reminder-container .payment-reminder-input{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.payment-reminder-container .payment-reminder-input .relative-field .help-block{
  position: absolute;
  bottom: -12px;
}

.payment-reminder-container .font-label{
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #75716B;
}

.modal-close-btn{
  position:absolute;
  top:20px;
  right:20px;
  z-index:10;
}

.modal h4{
    font-family: 'Platform App', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 26px;
    margin-bottom:  5px;
}
.modal p.intro{
    font-size: 14px;
    color: #75716B;
}

.popup-icon-container{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-bottom: 16px;
    font-size: 60px;
}

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

.popup-body-content{
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  background: #FFFFFF;
}

.popup-content{
    padding:20px 20px;
}

.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;
}

.popup-content .popup-icon{
    font-size: 70px;
    margin-bottom: 10px;
    display: inline-block;
}

.popup-content .popup-icon.red{
    color: #EE4056;
}

.popup-primary-btn{
    display: flex;
    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-primary-btn.red-cta{
    background:#EE4056;
    border:none;
    color:#FFF;
}

.popup-primary-btn.yellow-cta{
    background:#FFD200;
    border:none;
    color:#000000;
}

.popup-content-cta{
    display: flex;
    gap: 16px;
    padding:30px 0 0;
}

#allFilesModal,
#forwardModal{
    overflow-y: hidden;
    z-index: 5000;
}

#allFilesModal .modal-dialog,
#forwardModal .modal-dialog{
    overflow-y: initial;
}

#allFilesModal .modal-content,
#forwardModal .modal-content,
.modal-content.modal--border-radius{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#allFilesModal .modal-title,
#forwardModal .modal-title{
    font-family: 'Platform Bold', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.05em;
    color: #000000;
}

#allFilesModal .modal-header,
#forwardModal .modal-header{
    border-bottom: none;
    padding: 40px 40px 16px;
}

#allFilesModal .modal-header{
    padding-bottom: 24px;
}

#allFilesModal .modal-header .close,
#forwardModal .modal-header .close{
    background: url(../images/modal-close-icon.svg) no-repeat center;
    width: 26px;
    height: 26px;
    opacity: 1;
}

#allFilesModal .modal-body,
#forwardModal .modal-body{
    padding: 0px 40px;
    height: 48vh;
    overflow-y: auto;
    margin-bottom: 40px;
}

#allFilesModal .modal-body{
    overflow-y: hidden;
}

#allFilesModal .modal-body::-webkit-scrollbar-thumb,
#forwardModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #EFAC00;
}

#allFilesModal .social-media--item.document .icon-wrapper i{
  color: #EFAC00;
  font-size: 18px;
}

#forwardModal .modal-body .search-bar-container{
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1.5px solid #000000;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.modal-open #delayListTasks.modal{
    overflow-y: hidden;
    top: -25px;
}

.search-bar-container{
    display: flex;
}

.search-bar-container .icon-wrapper{
    width: 20px;
    height: 20px;
    margin-right: 16px;
}

.search-bar-container .search-input-container,
.search-bar-container .search-input-container .search-input{
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.search-bar-container .search-input-container .search-input{
    border: none;
}

.feed-listing-container{
    display: flex;
    flex-direction: column;
}

.feed-listing-container .feed-listing-wrapper{
    display: flex;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 0.5px solid #C0BFBB;
}

.feed-listing-container .feed-listing-wrapper .checkbox-wrapper{
    margin-right: 16px;
}

.checkbox-wrapper input[type='checkbox']{
    border: 1.5px solid #000000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    background-color: #C0BFBB;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.checkbox-wrapper input[type='checkbox']:checked {
    background-color: #FFD200;
}

.checkbox-wrapper input[type='checkbox']:not(:checked),
.checkbox-wrapper input[type='checkbox']:checked {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label,
.checkbox-wrapper input[type='checkbox']:checked+label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label:before,
.checkbox-wrapper input[type='checkbox']:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -10px;
    width: 26px;
    height: 26px;
    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']:checked+label:before {
    background-color: #FFD200;
    border: 1.5px solid #000000;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label:after,
.checkbox-wrapper input[type='checkbox']:checked+label:after {
  content: url("../images/checkbox-tick-icon.svg");
  position: absolute;
  top: -4px;
  left: 7px;
  font-size: 14px;
  line-height: 0.8;
  color: #000000;
  transition: all .2s;
}

.checkbox-wrapper input[type='checkbox']:not(:checked)+label:after {
  opacity: 0;
  transform: scale(0);
}

.checkbox-wrapper input[type='checkbox']:checked+label:after {
  opacity: 1;
  transform: scale(1);
}

.feed-listing-container .feed-listing-wrapper .feed-detail-wrapper{
    display: flex;
    flex-direction: column;
}

.feed-detail-wrapper .highlight-text{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px;
}

.feed-detail-wrapper .owner-wrapper{
    display: flex;
}

.feed-detail-wrapper .owner-wrapper .icon-wrapper{
    height: 18px;
    width: 18px;
    margin-right: 8px;
}

.feed-detail-wrapper .owner-wrapper .highlight-text{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
}

.highlight-text em{
    color: #EFAC00;
    font-weight:bold;
}

#forwardModal .modal-footer{
    border-top: none;
    padding: 0px 40px 40px;
}

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

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

.filter-black-icon{
    /*content: url("../images/filter-black-icon.svg");*/
    /*height: 100%;*/
    /*width: 100%;*/
    font-size: 18px;
    cursor: pointer;
}

.filter-black-icon.active{
    color: #EFAC00;
}

.arrow-head-next-wrapper{
    position: absolute;
    top: 18px;
    right: 24px;
    height: 20px;
    width: 20px;
}

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

.timestamp-wrapper{
    position: absolute;
    bottom: 18px;
    right: 24px;
    height: 24px;
    min-width: 50px;
    text-align: right;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #E6E5E1;
    box-sizing: border-box;
    border-radius: 500px;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #75716B;
}

.notification-popup--item {
    display: none;
    font-size: 19px;
    font-weight: 700;
    padding: 40px 0;
    line-height: 20px;
}

#notificationDelayModal .modal-content{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    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);
}

.notification-popup--item--day-delay{
    display: none;
    padding: 32px;
}

.delay--header-panel .action-close-wrapper i,
.notification-popup--item--day-delay .action-close-wrapper i{
    font-weight: bold;
    font-size: 26px;
}

.notification-popup--item--day-delay .icon-Detail_Schedule{
    font-size: 60px;
    color: #EFAC00;
}

.notification-popup--item--day-delay .button-panel{
    display: flex;
}

.notification-popup--item--day-delay .button-panel .button-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    flex: 1;

    border: 1px solid #000000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.notification-popup--item--day-delay .button-panel .button-wrapper.yellow-button{
    background: #FFD200;
    border: none;
}

.notification-popup--item--day-delay .button-panel .button-wrapper:first-child{
    margin-right: 8px;
}

.notification-popup--item--day-delay .button-panel .button-wrapper:last-child{
    margin-left: 8px;
}

.delay--header-panel{
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 32px 24px;
    line-height: 24px;
}

.action-close-wrapper,
.delay-date-action{
    cursor: pointer;
}

.icon-circle,.icon-circle:hover {
    display: inline-block;
    -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 10px auto;
    text-decoration: none;
}

.icon-triangle i {
    color: #EE4056;
    font-size: 100px;
    display: block;
    margin: 0 auto 10px auto;
}

.icon-circle i {
    line-height: 100px;
    font-size: 40px;
}


/*timeline*/

.ajaxTimelineHTML {
    margin-top: 40px;
}

.timeline {
    margin: 0;
}

.timeline-item--start {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    background: #2196f3;
    padding: 10px;
    color: #fff;
}

.timeline-item--end {
    /*background: #9c27b0;*/
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    background: #9c27b0;
    padding: 10px;
    color: #fff;
}

#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;
}


/* IE10 */

#gallery progress {
    color: #FFD200;
}


/* Firefox */

#gallery progress::-moz-progress-bar {
    background: #FFFFFF;
}


/* Chrome */

#gallery progress::-webkit-progress-value {
    background: #FFD200;
}


/* Polyfill */

#gallery progress[aria-valuenow]:before {
    background: #FFD200;
}

#gallery progress {
    -webkit-appearance: none;
    appearance: none;
}

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

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

#gallery progress[value]::-webkit-progress-value {
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

.timeline-circ {
    /*position: relative;*/
    overflow: hidden;
}

.timeline.collapse-lg:before {
    display: none
}

.timeline.collapse-lg .timeline-entry .card:after {
    left: -8px;
}

.property-details--right {
    display: flex;
    align-items: center;
    /*padding-top: 10px;*/
    line-height: 100%;
}

.project-timeline-users--listing {
    display: inline-block;
    margin-right: 24px;
    float: left;
    min-width: 50px;
}

.project-timeline-users--listing ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-timeline-users--listing ul:after {
    content: '';
    display: block;
    clear: both;
}

.project-timeline-users--listing ul li {
    width: 14px;
    float: left;
}

.project-timeline-users--listing ul li .member-dotdotdot {
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 100%;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.workplace-team-panel{
    display: flex;
    margin: 16px;
}

.workplace-team-panel .image-wrapper{
    width: 30px;
    height: 30px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    margin-right: 8px;
}

.workplace-team-panel .image-wrapper .image-content{
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

.workplace-team-panel .member-detail{
    display: flex;
    flex-direction: column;
}

.workplace-team-panel .member-detail .member-name{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.workplace-team-panel .member-detail .member-designation{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #75716B;
}

.timeline-project--panel {
    position: relative;
    line-height: 14px;
    padding: 10px 0;
}

.timeline-project--panel i {
    margin-top: 5px;
}

.timeline-project--panel .owner-details {
    /*margin-left: 40px;*/
    display: block;
    margin-left: 0px;
    font-size: 15px;
}

.timeline-project--panel .property-details {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: 'Platform Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    padding-left: 16px;
}

.project-timeline-users--panel {
    display: inline-block;
    float: left;
    line-height: 40px
}

.project-timeline-users--panel a{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
}

.project-timeline-users--panel .btn-group.open a{
    color: #FFD200;
}

.profile-icon {
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 2px solid #fff;
    /*font-size: 10px;
  line-height: 10px*/
    background: #fff;
}

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


/*.profile-icon img{
  width: 100%;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  vertical-align: -webkit-baseline-middle;
  height: 100%;
  
  
}*/

.project-timeline-users--panel ul {
    position: absolute;
    width: 300px;
    height: 240px;
    overflow: auto;
    z-index: 2;
    background: #fff;
    display: none;
    z-index: 3;
    list-style: none;
    margin: 0;
    padding: 0;

    border: 1px solid #E6E5E1;
    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: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.small-line-height {
    line-height: 14px;
    vertical-align: middle;
    height: 40px;
    display: table-cell
}

.project-timeline-users--panel ul li {
    color: #000
}

.timeline-post--panel {
    background: rgba(0, 0, 0, 0.04);
    position: relative;
    padding-right: 240px;
}

.timeline-post--gate {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
}

.timeline-post--status {
    position: relative;
    padding-left: 30px;
}

.timeline-post--status textarea {
    border: none;
    background: none;
    margin-top: 15px;
    padding: 5px 0 0 0;
    height: 40px;
}

.timeline-post--status i {
    position: absolute;
    left: 5px;
    top: 20px;
}

.timeline-post--action {
    position: absolute;
    right: 10px;
    top: 10px;
}

.timeline-post--panel textarea {
    width: 100%;
}


/*.datepicker{
  border-radius: 0 !important
}*/

.datepicker table {
    width: 100%;
}
.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active,.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover:active{
  background: #383633 !important;
  color: #FFD200;
}


/*
.form .form-group > label, .form-inline .form-group > label{
  position: relative;
}*/
select.selectList2,select.select2,select.select2-list,select.select2-teammember{
    position: absolute;
    pointer-events: none;
    top: 0;
    opacity: 0;
    height: 0.5px;
    max-width: 100%;
}
.selectList2 input {
    border: none !important;
}

.nano>.nano-content {
    overflow: auto
}

#content .nano {
    overflow-y: auto;
    max-height: 400px
}

#content .nano>.nano-content {
    position: relative;
}


/*.gui-controls{
  padding-left: 10px;
}
*/



/*support page*/
.support-page .container{
    padding:  0 15px;
    /* width:initial !important; */
}

.support-page h1{
    margin-top:24px;
    margin-bottom:12px;
}

.support-page .fixed-container{
    min-width: 100%;
}

.support-page{
    background: #fff;
    font-family: 'DM Sans',sans-serif;
}

.support-bg{
    background: url("../images/support-bg.svg") no-repeat right top ;
    height: calc(100vh - 100px); 
    position: absolute;
    width: 100%;
    left: 0;
    top: 100px;
    display: none;
}

.right-support-design-mobile{
    background: url("../images/support-bg.svg") no-repeat right top ;
    background-size: cover;
    position: absolute;
    width: 100%;
    padding-top: 30%;
}

.right-support-design-desk{
    display: none;
}

.right-support-design-mobile img,.right-support-design-desk img{
    width:100%;
    display: block;
    max-width: 300px;
    margin: 0 auto;
}

.support--form label.error,.form-group .form-control:focus ~ label.error{
    top: auto !important;
    bottom:  -20px;
    opacity: 1 !important;
    color:  red !important;
}

.support-page h1{
    font-size: 30px;
}

.support-page .successful{
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    padding-top: 40px;
    height: 300px;
}

.support-page .successful img{
    margin-bottom:20px;
}

@media (min-width: 768px){
    .support-bg{
        display: block;
    }
    .right-support-design-mobile{
        display: none;
        position: relative;
    }
    .right-support-design-desk{
        display: block;
    }
}

.support-page .form-group .form-control3,
.support-page .form-group .form-control3:focus,
.support-page .form-group .form-control3:active,.form-control3:hover{
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    width: 100%;
    line-height: 55px;
    padding: 0 10px !important;
    font-size: 19px;
    outline: none;
    font-weight: 700;
}
.support-page .form-group label:not(.error){
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height:1.846153846;
    opacity: 0.7;
}

.support-page input[type=submit],
.support-page input[type=submit]:hover{
    line-height: 50px;
    background: #FFD200;
    color: #000;
    border: 0;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-weight: 700;
    color: #000;
    font-size: 19px;
    min-width: 140px;
}

.support--form label.error {
    top: auto !important;
    bottom: -20px;
    opacity: 1;
    color: red !important;
    font-weight: normal;
    font-size: 12px;
}


/*project */

.project-detail--sidepanel {
    font-size: 15px;
    line-height: 21px;
    height: calc(100vh - 70px);
    overflow: auto;
    padding: 0 15px;
}

.project-detail--sidepanel .project-timeline-users--panel {
    font-size: 12px;
    line-height: 15px;
    padding-top: 12px;
}

.project-detail--sidepanel .owner-profile {
    padding-left: 60px;
    position: relative;
    font-weight: 700;
}

.project-detail--sidepanel .owner-profile img {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    border-radius: 20px;
    top: 20px;
    /*top: 50%;*/
}

.project-detail--sidepanel .owner-profile a {
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 20px;
}

.project-detail--sidepanel .owner-profile a:hover {
    text-decoration: none;
}

.nav-link--icon {
    line-height: 26px !important;
    text-align: center;
    padding: 10px 20px 10px 20px !important;
    color: rgba(0, 0, 0, 0.6);
    /*border-bottom: 1px solid black;*/
}

.nav-link--icon:hover {
    text-decoration: none
}

.nav-link--icon i {
    display: block;
    font-size: 24px
}

.property--item,
.owner--item {
    display: none
}

.project-order--item .title {
    font-size: 24px
}

.project-order--item {
    margin-top: 20px;
    display: block;
}


/*th.sticky-col{
  position: sticky;
  position: -webkit-sticky;
  
}*/


/*checkout*/

.project-hood--panel table tr th {
    font-size: 15px;
    line-height: 19px;
    font-weight: 700;
    color: #9E9E9E;
}

.project-hood--panel table tr td {
    font-size: 12px;
    line-height: 15px;
}

.project-hood--panel table tr td a:hover {
    text-decoration: none;
}

.project-hood--panel table tr td .contextual-menu--icon {
    position: relative;
    top: 0;
}

.project-hood--panel table tr td.action-panel {
    padding: 0 !important;
}

.project-hood--panel table.table-hover>tbody>tr:hover td {
    color: #EFAC00;
    background: none;
}

.project-hood--panel.checkout-hood {
    /*min-height: 2200px;*/
}

.open-history-order--link {
    text-decoration: underline;
}

.project-hood--panel {
    position: relative;
    padding-right: 400px;
    /*min-height: 800px;*/
    min-height: calc(100vh - 64px);
    /*max-height:  calc(100vh - 64px);*/
    overflow-x: hidden;
    /*overflow: hidden;
  padding-bottom: 250px;*/
}

.project-hood--panel.expand {
    padding-right: 0;
}

.project-sidepanel--sticky {
    width: 400px;
    position: absolute;
    right: 0;
    top: 0;
    /*overflow: auto;*/
    height: 100%;
    /*padding: 0 20px;*/
    border-left: 1px solid rgba(186, 186, 186, 0.5)
}

.project-sidepanel--sticky.minimize {
    right: -400px;
}

.project-sidepanel--sticky h4 {
    position: relative;
    padding-right: 40px;
}

.project-sidepanel--sticky h4 a {
    position: absolute;
    right: 0;
    top: 0;
}

.close-project-sidepanel--btn {
    position: absolute;
    /*left: -50px; */
    left: 0;
    z-index: 2;
    background: #F5F5F5;
    width: 20px;
    height: 50px;
    top: 75px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
    padding-top: 13px;
    padding-left: 6px;
}

.close-project-sidepanel--btn.left {
    left: -21px;
    box-shadow: -1px 1px 0px rgba(0, 0, 0, 0.25);
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.project-schedule-action--panel {
    min-height: 50px;
    padding: 15px;
}

.project-schedule-action--panel a {
    display: inline-block;
    padding: 0 10px;
}


/*scheduling*/

.teamMemberList .select2-choices .select2-search-choice {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}


/*cart*/

.order-cart--item {
    /*max-width: 700px*/
}

.order-cart--item img {
    display: block;
    width: 100%;
}

.order-cart-details--col {
    padding: 10px 0;
}

.cart-product-name {
    font-size: 14px;
    line-height: 21px;
    font-weight: 500
}


/*cost estimation*/

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

.discount-row>.col-sm-12:first-child {
    color: red;
}

.discount-row i:not(.md-dehaze) {
    color: #313534;
}

.discount-row~not:(.shopping-list--orders) {
    color: black;
}

.label-tag {
    color: #fff;
    display: inline-block;
    background: #FFD200;
    font-size: 11px;
    line-height: 22px;
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: 500;
    position: relative;
    top: -4px;
    margin-left: 25px
}

.market-segment--list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.market-segment--list li {
    list-style: none;
    padding: 0;
}

.input-container {
    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.flex-between{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}

/* Hide the browser's default checkbox */
.input-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.disabled{
  pointer-events: none;
}
.backdrop.disabled{
  pointer-events: auto;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 18px;
  width: 18px;
  
  border: 2px solid rgba(0, 0, 0, 0.54);
}


/* On mouse-over, add a grey background color */


/*.input-container:hover input ~ .checkmark {
  background-color: rgba(0, 0, 0, 0);
}*/


/* When the checkbox is checked, add a blue background */


/*.input-container input:checked ~ .checkmark {
  background-color: #FFD200;
  border-color: #FFD200;
}*/


/* Create the checkmark/indicator (hidden when not checked) */


/*.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}*/


/* Show the checkmark when checked */


/*.input-container input:checked ~ .checkmark:after {
  display: block;
}*/


/* Style the checkmark/indicator */


/*.input-container .checkmark:after {
  left: 4px;
  top: -1px;
  width: 7px;
  height: 13px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}*/

#offcanvas-feed-filter .input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chkTopicFilter {
    height: 0;
    width: 0;
    visibility: hidden;
}

.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 label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 90px;
    /*transition: 0.3s;*/
}

.input-container input:checked+label {
    background: #EFAC00;
}

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

.input-container label:active:after {
    width: 22px;
}

.search-filtering-panel .input-container{
    margin: 0;
    padding: 0;
}

.search-filtering-panel .input-container label{
    width: 34px;
    height: 18px;
}

.search-filtering-panel .input-container label:after{
    top: 1px;
    width: 15px;
    height: 15px;
}


.found-template--panel {
    margin-top: 20px;
    color: #07557E;
}

.ce-pricing--item {
    color: rgba(0, 0, 0, 0.3);
}

.confirmed-ce--row {
    color: #FFD200;
}

.table-intro {
    margin: 10px 0;
    font-size: 20px
}

.total-lines {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 90%;
}

.hidden-cart-section {
    background: #E5E5E5;
    padding: 10px 0;
}

.title-hidden-cart-item--section {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.15px;
    font-weight: 600
}

.mark-as-done--placeholder {
    position: absolute;
    left: 0;
    font-size: 20px;
    /*color: #0AA89E;*/
    opacity: 0.1
}

.mark-as-done--placeholder.green {
    color: #0AA89E;
}

.mark-as-done--placeholder.active {
    opacity: 1
}

.mark-as-done--placeholder i {
    position: relative;
    top: -5px;
}

.mark-as-done--placeholder i.mark-done-status {
    position: relative;
    top: -9px;
}

.cart-ce-item {
    position: relative;
    padding-left: 60px;
    padding-right: 20px;
}

.cart-ce-item .open-shopping-list--orders {
    position: absolute;
    left: 30px;
    font-size: 18px;
    top: 1px;
}

.cart-ce-item .notes--panel {
    position: absolute;
    right: 0;
    opacity: 0.1;
    top: 0;
}

.cart-ce-item .notes--panel.active {
    opacity: 1
}

.grand-total--panel {
    background: #FFD200;
    padding: 5px;
    color: #fff;
}

.ce-manage--section {
    padding: 5px 10px;
    color: rgba(0, 0, 0, 0.6);
    padding-right: 100px;
    position: relative;
}

.main-category--subsection {
    background: #F5F5F5;
    padding: 5px 10px;
    color: rgba(0, 0, 0, 0.6);
    padding-right: 100px;
    position: relative;
}

.ce-manage--section i {
    font-size: 20px
}

.ce-manage--section .dropdown-toggle {
    position: absolute;
    right: 7px;
    top: 10px;
}

.ce-manage--section .arrow-up {
    position: absolute;
    right: 65px;
    top: 2px;
}

.ce-manage--section .arrow-down {
    position: absolute;
    right: 35px;
    top: 0;
}

.main-category--subsection .dropdown-toggle {
    position: absolute;
    right: 9px;
    font-size: 16px
}

.main-category--subsection .arrow-up {
    position: absolute;
    right: 65px;
    top: 2px;
}

.main-category--subsection .arrow-down {
    position: absolute;
    right: 35px;
    top: 0;
}

.main-category--subsection .arrow-up i,
.main-category--subsection .arrow-down i {
    font-size: 24px;
}

.ce-item {
    padding: 5px 0;
}

.ce-item--dropdown {
    background: #E5E5E5;
    line-height: 16px;
    padding: 20px 0;
}

.ce-item--dropdown label {
    color: rgba(0, 0, 0, 0.6);
    line-height: 14px
}

.ce-item-dropdown--title {
    font-size: 20px;
    color: #000;
    margin: 10px 0 20px 0;
}

.ce-pricing-format {
    /*padding-right: 40px;
  text-align: right*/
    text-align: center;
}

.row-sticky-header [class*=col-] {
    text-align: center;
}

.ce-item input[type=text] {
    width: 100%;
    text-align: center;
}

#handover-modal .column-quotation--item {
    padding-left: 0px !important;
    padding-right: 0;
}

.column-quotation--item {
    padding-left: 40px !important;
    position: relative;
    padding-right: 120px;
    line-height: 16px;
    padding-top: 4px;
}

.column-quotation--item .open-shopping-list--orders {
    position: absolute;
    left: 25px;
    top: 6px;
}

.column-quotation--item .column-quotation--price {
    position: absolute;
    right: 0;
    top: -8px;
    width: 115px;
    font-size: 12px
}

.sortable-panel {
    position: relative;
}

.sortable-panel>.row {
    border-bottom: 2px solid #ededed;
    /*padding: 10px 0;*/
}

.sortable-panel>.row.shopping-list--orders {
    padding: 0;
}

.sortable-panel .handle {
    position: absolute;
    left: 0;
    width: 25px;
    height: 15px;
    cursor: move;
    top: 0px;
    font-size: 18px;
    color: #D7D5D5;
}

.pricing-in-CE--item {
    border: 1px solid black;
    margin: 10px 0 10px 0;
    padding: 15px 20px 10px 10px;
    position: relative
}

.pricing-in-CE--item div {
    line-height: 14px;
    margin-bottom: 10px
}

.pricing-in-CE--item .btn-group.contextual-menu--icon {
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 5px
}

.column-with-icons--panel {
    position: relative;
    padding-left: 22px !important;
}

.column-with-icons--panel i {
    position: absolute;
    left: 0;
    top: 14px;
}

.section-add-item--btn,
.section-add-item--btn:hover {
    display: inline-block;
    margin-bottom: 20px;
    color: #FFD200;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none
}

.second-level-action--panel {
    position: relative;
}

.second-level-action--panel .contextual-menu--icon {
    font-size: 20px;
    line-height: 26px;
}

.second-level-action--panel .contextual-menu--icon i {
    top: 5px;
    position: relative;
    /*font-size: 20px;*/
}

.contextual-menu--icon.with-txt {
    padding-right: 30px;
}

.contextual-menu--icon.with-txt i{
    position: absolute;
    right: 0;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

.contextual-menu--icon.with-txt i.icon-Basics_Filter{
  font-weight: 700;
}

.contextual-menu--icon.with-txt i.icon-Arrow_Dropdown{
  color: #C0BFBB; 
}

.contextual-menu--icon.with-txt .badge{
    width: 7px;
    height: 7px;
    left: 16px;
    top: 6px !important;
    min-width: 0px;
}

.contextual-menu--icon li{
    
}

.contextual-menu--icon li a.delete-item {
    padding-left: 25px !important;

}
.contextual-menu--icon li a.delete-item i{
    color: #EE4056;    
}

.pills {
    height: 32px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: none;
    color: #75716B;
    line-height: 32px;
    font-size: 12px;
    border: 1px solid #75716B;
}

.generic-pills{
  height: 32px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: none;
  color: #75716B;
  line-height: 32px;
  font-size: 12px;
  border: 1px solid #75716B;
  padding: 0px 15px;
}

.generic-pills.generic-pills--warning{
  border:1px solid red;
  color: red;
  background:transparent;
}

.dark-gray-bar .pills,.dark-gray-bar .status-pill{
    background: #E5E5E1;
    color: #75716B;
    border-color: #E5E5E1 !important;
}
.dark-gray-bar .pills i,.dark-gray-bar .status-pill i{
    color: red
}
.yellow-bar .pills,.yellow-bar .status-pill{
    background: #FFF0A8;
    color: #000;
    font-weight: 700;
    border: #FFF0A8;
}

.green-bar .pills,.green-bar .status-pill{
    background: #00B485;
    color: #fff;
    border: none;
}

.green-bar2 .pills,.green-bar2 .status-pill {
    border: 1px solid #034126;
    color: #034126;

}

.pills.red-bar,.pills.status-pill {
    background: rgba(252, 231, 231, 1);
    color: rgba(198, 40, 40, 1);
}

.red-pill .pills.fixed-icon{
/*  background:red;*/
}

.pills.red-bar,
.data-listings[data-view="list"] .red-bar .pills{
  background: #FCDEDF;
  color: #EE4056;
  border: none;
}

.data-listings[data-view="list"] .red-bar .project-status-tbd--pill{ 
  color: #000;
  font-weight: 700;
}

/*.project-status-tbd--pill{
    color: #75716B;
}*/

.pills.orange-bar {
    background: #FFF5E5;
    color: #FFA000;
}

.pills.blue-bar {
    background: #b8dae6;
    color: #00AEEF;
}

.pills.grey-bar {
    background: #E8E8E8;
    color: rgba(0, 0, 0, 0.54);
}

.pills.fixed-icon,.status-pill {
    margin-top: 6px;
    padding-left: 35px !important;
    padding-right: 30px  !important;
    font-weight: 700;
    line-height: 31px;
    position: relative;
}

.pills.fixed-icon i,.status-pill i {
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 18px;

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

}

.pills.handovered {
    border: 1px solid #034126;
    color: #034126;
}

.pills.planning {
    border: 1px solid #C0BFBB;
    color: #75716B;
}

/*.status-pill i {
    
    top: 7px;
    
}*/

.project-progress-label {
    position: absolute;
    display: inline-block;
    font-size: 10px;
    width: 30px;
    text-align: center;
    top: -10px;
}

.contextual-menu--icon {
    cursor: pointer;
    min-width: 30px;
    height: 30px;
    text-align: center;
}
.dropdown--txt{
    font-size: 14px;
}
 
 .contextual-menu--icon.open .dropdown-toggle{
    
    left: auto;
 }
.contextual-menu--icon.open i{
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    /*position: absolute;*/
    /*left: 10px;*/
    color: #EFAC00;
    /*top: 15px;*/
    /*right: 5px;*/

}

.btn-group.contextual-menu--icon.with-txt.open i{
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    position: absolute;
    /*left: 10px;*/
    color: #EFAC00;
    top: 5px;
}

.contextual-menu--icon .dropdown-menu i{
    left: 10px;
    top: 11px;
}

/*.contextual-menu--icon i {
    line-height: 35px;
}*/

/*.open.contextual-menu--icon {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}*/

.project-card:hover {
    text-decoration: none
}
.project-card:hover .project-list-missing-milestone--status,
.project-list-missing-milestone--status:hover{
  text-decoration: underline;
  cursor:pointer;
}
.project-card .pills.fixed-icon.completed{
    
    color: #fff;
    border: none;
}

.not-allow-cursor:hover{
  cursor:not-allowed;
  position:relative;
}

.project-card-userInvolve--tooltip{
  position:absolute;
  top:50%;
  left:50%;
  z-index: 10;
  pointer-events: none;
  display: none;
}

.project-card-userInvolve--tooltip>div{
  position:absolute;
  top:0;
  left:0;
  background:#FFF;
  padding:8px 10px 5px 10px;
  color:#75716B;
  line-height:16px;
/*  font-weight:bold;*/
  width:170px;
  border:1px solid #C0BFBB;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;

  box-shadow:0px 0px 30px 0px rgba(0,0,0,0.1);
}

.project-card-userInvolve--tooltip p{
  margin-bottom:0;
}

.project-card .pills.fixed-icon.handovered{
    
  /*color: #fff;
  border: none;*/
  color: #034126;
  border:  1px solid #034126;
}


.project-card .pills.fixed-icon {
    margin-top: 0;
    display: inline-block;
}

.card2-body{
    padding: 15px;
}
.card-body.small-padding {
    padding: 10px;
}

#content .card .card-body .btn.btn-icon-toggle {
    /*box-shadow: 1px 0px 3px rgba(0,0,0,0.7);*/
}

.card-head .tools {
    float: none;
}

.insert-CE-pricing--td {
    padding: 0 !important;
    height: 40px;
    position: relative;
}

.insert-CE-pricing--td .easy-autocomplete-container ul {
    border-bottom: 1px solid #ccc;
    /*position: relative;
  overflow-y: scroll;
  height: 250px;
  border-radius: 0 0 2px 2px*/
}

.easy-autocomplete-container ul li:last-child {
    border-bottom: 0 !important;
}


/*.easy-autocomplete-container ul li:last-child*/


/*border-radius: 0 0 2px 2px*/


/*border-width: 0 1px 1px*/

.insert-CE-pricing--panel {
    padding-left: 30px;
    position: absolute;
    top: 0;
    width: 100%
}

.insert-CE-pricing--panel input[type=text] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 20px;
    padding-top: 0;
}

.insert-CE-pricing--panel .easy-autocomplete {
    position: absolute;
    width: 100% !important;
    left: 0;
}

.insert-CE-pricing--panel .easy-autocomplete input {
    border: none;
}

.insert-CE-pricing--panel .easy-autocomplete-container {
    position: relative;
    top: 30px;
}

.insert-CE-pricing--panel .easy-autocomplete input {
    width: 100%;
}

.add-CE-pricing--btn {
    position: absolute;
    left: 0;
    top: 10px;
}

#content .panel-group .btn-icon-toggle {
    box-shadow: none
}

.sticky-col {
    /*position: sticky;*/
    /*position: -webkit-sticky;*/
    background-color: #fff;
}

.first-col {
    left: 0px;
    width: 10px;
}

.second-col {
    left: 39px;
    width: 200px;
    text-align: left;
    z-index: 2;
}

.owner-details--panel,
.property-details--panel {
    position: relative;
    margin-top: 10px;
}
.owner-details--panel .card{
    box-shadow: none !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #C0BFBB;
    overflow: hidden;
}
.owner-details--panel .card-body{
    padding: 16px;
    background: #F5F5F5;
    
    
}

.owner-details--panel .o-name{
    font-weight: 700;
}

.owner-details--panel .btn{
    top: 10px;
}
.owner-details--panel .btn i{
    font-size: 20px;
}

#datatable10 {
    position: relative;
}

.table {
    background: #fff
}

.clickable-row,.row-popup--link {
    cursor: pointer;
}

.clickable-row{
    position:relative;
}

.clickable-row td{
    overflow:hidden;
}

.clickable-row div{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.clickable-row-a{
    width:100%;
    height:100%;
    position:absolute;
    top: 50%;
    left: 50%;
    padding: 10px 8px;
    box-sizing: content-box;
    transform: translate(-50%,-50%) scaleY(5);
    z-index:11;
}

.style-success .table {
    color: #313534;
}

.uploadedHTML {
    position: relative;
    overflow: auto;
    height: 300px;
}

.uploadedHTML .img-holder {
    position: relative;
    text-align: center;
    vertical-align: middle;
    /*display: table-cell;*/
    border: 2px solid #ededed;
    height: 100px;
    margin-bottom: 20px
}

.uploadedHTML .img-holder .delete--btn {
    position: absolute;
    right: 0;
    bottom: 0;
    /*border: 1px solid red;*/
    padding: 5px;
    background: red;
    color: #fff;
}

.uploadedHTML .img-holder img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}


/*#datatable10  thead{
  height: 100px;
}
#datatable10 tr th{
  position: absolute;
  top: 0;
}*/


/*calendar*/

.fc-toolbar.fc-header-toolbar {
    padding: 0 20px;
}

.calendar-day--view {
    position: absolute;
    width: 500px;
    height: calc(100% + 50px);
    background: #fff;
    right: -525px;
    top: -25px;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0px 15px 12px rgba(0, 0, 0, 0.22), 0px 19px 38px rgba(0, 0, 0, 0.3);
}

.close--calendar-day-view--btn {
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 30px
}

.calendar-day--view.active {
    right: -12px;
}

.fc-day-header {
    padding: 8px 4px !important;
    color: #313534
}

.fc-day-grid-event {
    cursor: pointer;
}

.table-filter {
    display: block !important;
}

.table-filter .nav {
    display: none
}


/*.table-filter select{
  display: block;
  margin: 20px 0 0 20px;
}*/

.table-filter {
    padding: 20px;
}

.fc-more-popover .fc-event-container {
    position: relative;
    overflow-y: auto;
    max-height: 200px
}

.control--form .btn-floating-action .fa,
.control--form .btn-floating-action .md,
.control--form .btn-floating-action .glyphicon {
    line-height: 30px
}

.gantt_control label {
    text-align: left;
}

.gantt_control .form-control,
.gantt_control .select2-container .select2-choice,
.gantt_control .select2-container .select2-choice {
    font-size: 14px;
    height: 26px;
    line-height: 26px;
    margin: 0;
}

.gantt_control .select2-dropdown-open .select2-choice {
    background: none
}

.alert-danger {
    line-height: 16px
}

.inline-loading-gif {
    display: none
}


/*.form-control[readonly]{
  cursor: pointer;
}*/
.help-block{
    margin-top: 5px;
    position: relative;
    bottom: 0;
    line-height: 8px;
}
.form-group3 .help-block{
    margin-top: 0;
    position: absolute;
    bottom: -17px;
    line-height: 12px;
    color: #f44336;
    opacity: 1;
}
.modal .help-block {
    /*position: relative !important;
  bottom:0 !important;*/
}

#handover-modal .column-quotation--item label,
.checkbox-complete--btn {
    cursor: pointer;
}

#handover-modal .help-block {
    position: relative;
    bottom: 0;
    color: red;
    opacity: 1
}

label.error {
    display: block;
    color: #f44336
}

table .warning td {
    background-color: #faebd4 !important
}

.pricing ul {
    list-style: none
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.calculator-panel {
    position: relative;
    padding-left: 200px;
}

.calculator-side--panel {
    position: absolute;
    left: 0;
    width: 170px;
}

.calculator-side--panel a {
    display: block;
}

.calculator-main--panel {}

.momentOfDate {
    display: none
}

.momentOfDate.show {
    display: inline-block;
}


/*dashboard page*/

.dashboard-section p {
    font-size: 19px;
    line-height: 25px;
}

.dashboard-running-project--txt,
.dashboard-running-project--txt:hover {
    font-size: 17px;
    margin: 40px 0 20px 0;
    display: block;
    text-decoration: none;
}


/*order page*/

.sidepanel--cards {
    min-height: 100px;
    position: relative;
    /*padding-left: 120px;*/
}

.left-sidepanel--cards {
    position: absolute;
    left: 0;
    width: 100px;
}

.left-sidepanel--cards ul {
    list-style: none;
    line-height: 18px
}

.left-sidepanel--cards ul li {
    margin-bottom: 10px;
}

.main-side--cards {
    width: 100%;
}

.category--item {
    display: none
}

.category--item.active {
    display: block;
    margin-top: 40px;
}

hr {
    margin: 0;
}

.order-progress--box {
    background: #ededed;
    padding: 5px;
    color: #000;
    margin-bottom: 20px;
    line-height: 16px
}

.order-details--panel {
    position: relative;
    min-height: 500px;
}

.ajax-loading-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
}

.loading-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    color: #fff
}

.loading-panel .inline-loading-gif {
    /*display: block; position: absolute; top: 50%; left: 50%; margin-top: -15px;margin-left: -15px;*/
    display: block;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-top: 0;
    margin-left: -15px;
}

.ce-table {
    position: relative;
    min-height: 100px
}

.template-six {
    width: 100%;
    padding-right: 300px;
    position: relative;
}

.main-content-left {
    width: 100%;
    /*position: absolute;*/
    /*right: 100px;*/
}

.side-panel-right {
    /*position: absolute;*/
    /*right: 0px;*/
    /*top: 0px;*/
    /*width: 300px;*/
}


/*margin, order*/

.final-cart .productTable thead tr th {
    background: #f6f8fb
}

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

.productTable td {
    border-top: none !important;
}

.final-cart .productTable thead tr th:first-child,
.final-cart .productTable tbody tr td:first-child {
    padding-left: 20px !important;
}

.prev-history--listing {
    /*margin: 40px 0 !important;*/
    background: none;
}

.prev-history--listing th {}

.prev-history--listing td {
    padding: 2px !important;
    border: none !important
}

.inside-cart {
    background: #E5E5E5;
    padding: 10px;
    display: none;
    line-height: 15px;
}

.inside-cart [class*=col-] {
    /*color: rgba(49, 53, 52,0.55);*/
}

.curtains-card {}

.curtains-body--card {
    padding: 20px 0;
    font-size: 14px;
    line-height: 16px;
}

.curtains-body--card label {
    color: #9E9E9E;
}

.curtains-body--card .form-control-static {
    margin-bottom: 10px;
    color: #000;
}

.inside-cart [class*=col-] .form-control-static {
    line-height: 16px;
    margin-top: 5px;
    color: rgba(49, 53, 52, 1);
}

.inside-cart img {
    display: block;
    width: 100%;
}

.inside-cart--content {
    min-height: 140px;
}

.dept-title {
    font-size: 14px;
    font-weight: bold;
}

.checkout-hood .company-group--row {
    display: block;
}

.company-group--row,
.company-margin--listing {
    display: none
}

.company-group--row.card-head.card-head-xs,
.company-group--row .card-head {
    min-height: auto;
}

.shopping-list--orders {
    display: none;
    background: #E5E5E5
}

.shopping-list--orders .row {
    margin: 0 -15px;
}

.shopping-list--orders img {
    display: block;
    width: 100%
}

.section-header {
    min-height: 85px;
    height: auto
}



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


/*ganttchart*/

.deadline {
    position: absolute;
    border-radius: 12px;
    border: 2px solid #585858;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: 6px;
    z-index: 1;
    background: url("common/deadline_icon.png") center no-repeat;
}

.overdue-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}


/*makeoverlog*/

.progress-bar2 {
    text-align: left;
    margin: 20px 0;
}

.box {
    
    float: left;
    --v: calc( ((18/5) * var(--p) - 90)*1deg);
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    padding: 10px;
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(var(--v), #75716B 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(var(--v), transparent 50%, #FFD200 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, #75716B 50%, #FFD200 0);
}

.progress-task {
    font-size: 15px;
    line-height: 19px;
    float: left;
    margin-left: 10px;
}

.progress-task span {
    display: block;
    font-size: 19px;
    line-height: 25px;
    font-weight: 700;
    color: #75716B;
}

.progress-bar3 {
    text-align: left;
    margin: 0px 0;
}

.box3 {
    float: left;
    --v: calc( ((18/5) * var(--p) - 90)*1deg);
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 50%;
    padding: 10px;
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(var(--v), #75716B 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(var(--v), transparent 50%, #FFD200 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, #75716B 50%, #FFD200 0);
}

.progress-task3 {
    font-size: 15px;
    line-height: 19px;
    float: left;
    margin-left: 10px;
}

.progress-task3 span {
    display: block;
    font-size: 35px;
    line-height: 25px;
    font-weight: 700;
    color: #000;
    font-family: 'Platform Bold', Arial;
    line-height: 38px;
}

.project-summary--item {
    font-size: 14px;
    line-height: 23px;
    color: #75716B;
    margin-bottom: 10px;
}

.project-summary--item label {
    font-weight: 700;
    margin: 0;
}

.clickable {
    cursor: pointer;
}

.edit-canvas-task--btn i {
    font-size: 20px;
    line-height: 50px;
}

.edit-canvas-task--btn,
.edit-canvas-task--btn:hover,
.edit-canvas-task--btn:focus {
    text-decoration: none;
    background: #FFD200;
    position: absolute;
    right: 0;
    top: -10px;
    color: #000 !important;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 2;
}

.milestone-group {
    font-size: 14px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    position: relative;
    /*overflow: hidden;*/
}

.milestone-group--overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 240, 168,0.3);
    z-index: 2;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    display: none;

    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    border: 1px solid rgba(239, 172, 2,0);
}

.milestone-group--wholescreen-overlay{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    pointer-events:none;
    display: none;
}

.milestone-group--wholescreen-overlay.active {
    display: block;
}

.milestone-group.ui-state-hover .milestone-group--overlay{
    background: rgba(255, 240, 168, 0);
    border: 3px solid rgba(239, 172, 2,1);
}

.milestone-group.ui-state-active .milestone-group--overlay{
    display: block;
}

.milestone-group .task--item2.last-task,.milestone-group .task--item2:last-child{
    -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;
}

.stage-group{
    padding: 10px;
    padding-bottom: 0px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    border-left:  10px solid #E6E5E1;
    margin-top: 20px;
}

.stage-group.planning{
    border-color: #E5E5E1;
}
.stage-group.start{
    border-color: #FFE982;
}
.stage-group.half_way{
    border-color: #FFD200;
}
.stage-group.last_mile{
    border-color: #EFAC00;   
}
.stage-group.complete{
    border-color: #00B485;      
}
.stage-group.defect,.stage-group.defects_rectification{
    border-color: #008562
}

/*ProjectList Stage Color*/
.project-progress--content .stage-group{
  width: 8px;
  height: 8px;
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  border-left: none;
  margin-right: 5px;
}
.project-progress--content .stage-group.planning{
  background: #E5E5E1;
}

.project-progress--content .stage-group.start{
  background: #FFE982;
}

.project-progress--content .stage-group.half_way{
  background: #FFD200;
}

.project-progress--content .stage-group.last_mile{
  background: #EFAC00;
}

.project-progress--content .stage-group.complete{
  background: #00B485;
}

.project-progress--content .stage-group.defects_rectification{
  background: #008562;
}

.project-progress--pill-overdue .pills{
  border:1px solid #EE4056;
  color:#EE4056;
}

.project-progress--pill-complete .pills{
  border:none;
  color:#75716B;
  background:#E6E5E1;
}

.project-progress--pill-incomplete .pills{
  border:1px solid #C0BFBB;
  color:#75716B;
}

.project-progress--content .stage-group--red{
  color:#EE4056;
}

.project-progress--linkout{
  display:inline-block;
  font-size:.9em;
  margin-left:5px;
}
/**/

.stage-group:first-child{
    margin-top: 0;
}

.stage-group h3{
    margin: 0 0 10px 0;
    padding: 0;
}
.milestone--item {
    background: #F5F5F5;
    padding: 16px 24px;
}

.past,
.past td {
    background: #FFF4F4 !important;
}

.dueing,
.dueing td{
    background: #FFFAE9 !important;
}

.edit-subtask--btn,
.edit-subtask--btn:hover,
.edit-subtask--btn:focus {
    text-decoration: none;
    background: #FFD200;
    position: absolute;
    right: 0;
    top: 0px;
    color: #000 !important;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.edit-subtask--btn {
    font-size: 20px;
    line-height: 50px;
}

.taskNameTxt {
    font-size: 19px;
    line-height: 25px;
    font-weight: 700;
    margin-bottom: 8px;
}

.taskDescriptionTxt {
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 32px;
}


/*makeoverlog listing*/

.text-mini-regular-12{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.color-grey-4{
    color: #75716B;
}
.color-primary-black{
  color: #000000;
}
.color-primary-white{
  color: #FFFFFF;
}
.color-prinary-yellow{
  color: #FFD200;
}

.bg-color-primary-yellow{
    background: #FFD200;
}
.bg-color-green-3{
    background: #00B485;
}
.bg-color-green-3 i{
    color: #FFFFFF;
}

.header-text-20{
    font-family: 'Platform Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0.05em;
    color: #000000;
}
.project-listing.task-listing.quick-mode--on{
    margin-bottom: 150px;
}
.quick-mode--panel{
    position: fixed; 
    width: 100%; 
    height: 100px; 
    bottom:0 ; 
    background: #FFD200; 
    left: 0;
    padding-left: 64px; 
    z-index:995;
    display: none;
}
.quick-mode--panel label{
    padding-top:  30px;
    font-size: 20px;
    font-weight: 700;

}

/*.project-listing.quick-mode--on .quick-mode--panel{
    display: block;
}*/

.quick-mode--on .milestone-group--listing .task--item2.flagged .item-icon--panel,
.quick-mode--on .milestone-group--listing .task--item2.completed .item-icon--panel,
.quick-mode--on .milestone-group--listing .task--item2.flagged td.task-name--display,
.quick-mode--on .milestone-group--listing .task--item2.completed td.task-name--display,
.quick-mode--on .milestone-group--listing .task--item2.flagged td>*:not(div),
.quick-mode--on .milestone-group--listing .task--item2.completed td>*:not(div){
    opacity: 0.7;
}

.quick-mode--on .milestone-group--listing .task--item2.flagged td:last-child,
.quick-mode--on .milestone-group--listing .task--item2.completed td:last-child{
    visibility: hidden;
}

.quick-mode--panel .quick-mode-actions--panel{
    padding-top: 30px ;
    text-align: right;

}
.project-listing .task--item,
.project-listing .task--item:hover,
.project-listing .task--item:focus {
    border-bottom: 1px solid #C0BFBB;
    padding: 14px 30px 14px 50px;
    position: relative;
    display: block;
    text-decoration: none;
}

.project-listing .task--item:last-child {
    border-bottom: none;
}

.project-listing .task--item.disable-check {
    padding-left: 10px;
}

.project-listing .approval-panel{
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 16px; 
    border: 1px solid #C0BFBB; 
    box-sizing: border-box; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    margin-bottom: 24px;
}

.project-listing .approval-panel .text-wrapper{
    width: 40%; 
    font-family: "DM Sans", sans-serif; 
    font-style: normal; 
    font-weight: normal; 
    font-size: 14px; 
    line-height: 18px; 
    color: #000000;
}

.task-status--group,
.project-info--group {
    background: none;
    margin-top: 10px;
}

.project-info--group .btn-group .btn{
    z-index:initial;
}

.task-status--group button,
.task-status--group button:focus,
.task-status--group button:hover,
.project-info--group button,
.project-info--group button:focus,
.project-info--group button:hover {
    background: none !important;
    border: none;
    text-decoration: none !important;
    text-transform: none;
    color: #75716B;
}

.task-status--group button.active,
.task-status--group button.active:hover,
.task-status--group button.active:focus,
.project-info--group button.active,
.project-info--group button.active:hover,
.project-info--group button.active:focus {
    border-bottom: 2px solid #EFAC00;
    color: #000;
}

.m-section--item {
    display: none;
    padding: 15px 0;
}

.info-section {
    border-top: 1px solid #C0BFBB;
}

.project-listing .task--item label {
    margin: 0;
}

.project-listing .task--item .project-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.project-listing .task--item .assigned-to-member {
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
}

.project-listing .task--item .project-key-holder {
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
    margin-top: 10px;
    color: #75716B;
}

.project-listing .task--item .project-key-holder i {
    display: inline-block;
    margin-right: 5px;
    color: #EFAC00;
}

.project-listing .task--item .selection {
    position: absolute;
    left: 10px;
    cursor: pointer;
    height: 28px;
    top: 50%;
    margin-top: -14px;
    padding-left: 0;
}

.project-listing .task--item .fa-chevron-right {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    font-size: 20px;
}

.project-listing .task--item .project-item--content2 {
    cursor: pointer;
    color: #000;
    text-decoration: none;
    font-size: 19px;
    line-height: 25px;
    padding-bottom: 5px;
    position: relative;
    text-align: left;
}

.project-listing .task--item.past .project-key-date span {
    color: #EE4056;
    border-color: #EE4056;
    background: #FFF4F4;
}
.project-listing .task--item.dueing .project-key-date span {
    border-color: #F16321;
    color: #F16321;
}


.project-key-date.red-pill span{
  color: #EE4056;
  border-color: #EE4056;
  background: #FFF4F4;
}

.past .task-dates {
    color: #EE4056;
}

.past .task-dates label{
    margin: 0;
}

.red-pill--border-text .task-dates{
  border-color: #EE4056;
  color: #EE4056;
}

.project-key-date {
    color: rgba(117, 113, 107, 1);
    font-size: 15px;
    line-height: 19px;
    margin-top: 0px;
    font-weight: 600;
}

.project-key-date span {
    font-size: 13px;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin-left: 0px;
    margin-bottom: 10px;
}

.project-listing .milestone-item-non-quick-edit--content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-listing .milestone--item {
    cursor: pointer;
    position: relative;
    padding: 14px 24px 14px 25px;
    top: 0px;
    z-index: 2;
    background: #F5F5F5;
    
}
.project-listing .milestone-group.collapsed{
    position: relative;
    overflow: hidden;
}

.project-listing .milestone-group:not(.collapsed) .milestone--item {
    border-bottom: 1px solid #C0BFBB;
    -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;
}

.milestone-arrow-container{
    display: flex;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #EFAC00;
    padding-top: 5px;
}

.milestone-arrow-container i{
    font-size: 18px;
}

.project-listing .milestone-group.collapsed .milestone-arrow-container{
    color: #75716B;
}

.project-listing .milestone-group.collapsed .milestone-arrow-container .milestone-arrow-wrapper{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 13px;
    /*transition: all 0.15s ease-in;*/
}

.project-listing .milestone-group.collapsed{

}

.project-listing .milestone--item label {
    position: absolute;
    right: 25px;
    font-size: 14px;
    top: 50%;
    
    color: #EFAC00;
    margin: -12px 0 0 0;
}

.project-listing .task-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
}

.project-listing .task-icon.dueing {
    color: #F16321;
}

.project-listing .task-icon.past {
    color: #EE4056;
}

.project-listing .task-icon.far {
    color: #313534;
}

.project-listing .task-icon.complete {
    color: #00B485;
}

.project-listing .taskpdf-uploaded.inline-popup {
    width: 100%;

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

}
.project-listing .taskpdf-uploaded.inline-popup .multi-line-ellipsis {
    width: 100%;
    display: inline;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
    /* Important for long words! */
}

.project-listing .taskpdf-popup.inline-popup .multi-line-ellipsis {
    padding: 0 20% 0 20%;
    display: inline;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
    /* Important for long words! */
}


.mfp-container .inline-popup{
    color: #fff;
}

.mfp-container .inline-popup i.icon-Detail_Doc{
    font-size: 40px;
}

/*.project-listing .milestone-group:not(.collapsed) .milestone--item span.indication-arrows i{
  color: #EFAC00;
  display: none;
}

.project-listing .milestone-group:not(.collapsed) .milestone--item span.indication-arrows i:first-child{
  display: inline-block;
}*/

.project-listing .milestone-group {
    /*transition: all 3.1s ease;*/
    margin-bottom: 20px;
}



.project-listing .milestone--item span.indication-arrows {
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -20px;
    font-size: 24px;
}

.project-listing .milestone--item .milestone-action--panel{
    position: absolute;
    right: 50px;
    top: 0;
}

.project-listing .milestone-group .milestone--item span.indication-arrows i {
    color: #EFAC00;
    display: none;
    transform: rotate(180deg);
}

.project-listing .milestone-group.collapsed .milestone--item span.indication-arrows i {
    color: #75716B;
    display: none;
    transform: rotate(180deg);
}
.project-listing .milestone-group.collapsed .milestone--item label{
    color: #75716B;
}



.project-listing .milestone-group .milestone--item span.indication-arrows i:first-child {
    display: inline-block;
    transform: rotate(0deg);
}

.project-listing .milestone-group.collapsed .task--item2 {
    display: none;
}

.project-listing .milestone-group.collapsed .milestone--item span.indication-arrows i {
    display: inline-block;
}

.project-listing .milestone-group.collapsed span.indication-arrows i:first-child {
    display: none;
}

.project-item--content {
    padding-left: 30px;
    position: relative;
    line-height: 14px;
    vertical-align: middle;
}

.project-item--content .form-control{
  display: none;
}

.quick-edit-mode .project-item--content .form-control{
  display: inline-grid;
}
.quick-edit-mode .assigned-to-member{
  position: relative;
  width: 100%;
}
.project-item--content .assigned-to-member b{
  display: block;
}
.quick-edit-mode .project-item--content .assigned-to-member b{
  display: none;
}

.project-item--content .item-icon--panel.disabled,
.project-item--content .item-icon--panel,
.project-item-quick-edit--content .item-icon--panel {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    font-size: 20px;
    color: inherit;
}
.project-item-quick-edit--content .item-icon--panel{
    margin-top:  -20px;
}
.quick-edit-mode .project-item--content table tr td{
  font-weight: normal !important;
}
.project-item--content table tr td {
    padding: 0 5px;
    font-weight: 700;
    word-break: break-all;
}

.subtask--listing,
.parentTask--listing {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.parentTask--listing li:first-child {
    padding-top: 0;
}

.subtask--listing li,
.parentTask--listing li {
    position: relative;
    padding: 20px 0;
    border-top: 1px solid #C0BFBB;
}

.subtask-label {
    font-size: 17px;
    line-height: 23px;
    font-weight: 600;
    color: #75716B;
    margin-top: 20px;
    margin-bottom: 20px;
}

.task-divider {
    border-bottom: 1px solid #C0BFBB;
    margin-bottom: 10px;
}

.subtask--item.view {
    padding: 10px 24px 24px 24px !important;
}

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

.subtask--listing .subtask--item,
.parentTask--listing .subtask--item {
    position: relative;
    padding-right: 0px;
}

.subtask--listing .subtask--item h3,
.parentTask--listing .subtask--item h3,
.st-sl .subtask--item h3 {
    color: #000;
    font-weight: 700;
    font-size: 19px;
    margin: 0 0 10px 0;
}

.subtask--listing .subtask--item h3 {
    margin-bottom: 4px;
}

.subtask--listing .subtask--item p,
.parentTask--listing .subtask--item p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 23px;
}

.subtask--listing .subtask--item p {
    margin-bottom: 16px;
}


.st-sl hr{
    margin:  20px 0;
}

.st-sl .subtask--item{
    padding-right:  50px;
    position: relative;
}
.st-sl .subtask--item.completed-quick-edit--item{
    padding-right: 0;
}
.st-sl .form-group{
    margin: 0 0 19px 0 !important;
}
/*.st-sl .subtask--item{
    border-
}*/

.postUpdateDate {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: #75716B;
    margin-top: 24px;
}

.bullet-dot {
    margin: 0px 16px;
}

.subtask--date {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 5px 15px;
    color: #75716B;
    text-align: center;
    display: inline-block;
    min-width: 120px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 20px;
}

.subtask--date label {
    font-weight: 400;
    margin: 0;
}

.subtask--date.warning{
  color: #EE4056;
  border-color: #EE4056;
  font-style:italic;
  font-weight:normal;
}

.taskStatus.flagged{
    background: #FCDEDF;
    color: #EE4056;
    border-color: #FCDEDF;
    font-weight: 700;
}

.taskStatus.warning{
  color: #EE4056;
  border-color: #EE4056;
  font-style:italic;
}

.taskStatus,
.taskdates--item {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 8px 16px;
    color: #75716B;
    text-align: center;
    display: inline-block;
    min-width: 120px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #75716B;
}

.taskdates--item.nodate{
  border:1px solid #EE4056;
  color:#EE4056;
  font-style:italic;
/*  display:inline-block !important;*/
}

.completed-tick {
    display: inline-block;
    margin: 0 5px;
    position: relative;
    padding-left: 40px
}

.completed-tick i {
    position: absolute;
    left: 0
}

.task-dates {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 7px 10px;
    line-height: 14px;
    color: #75716B;
    text-align: center;
    display: inline-block;
    min-width: 130px;
}

.task-dates.no-date {
    color: #EE4056;
    border: 1px solid #EE4056;
}

.status-pill{
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 9px 10px;
    line-height: 14px;
    color: #75716B;
    text-align: center;
    display: inline-block;
    min-width: 130px;
    margin-top: 0;

}
.status-pill.pending-approval{
    color: red;
    border-color: red;
    font-style: italic;
}

.task-dates.completed {
    background: #E5E5E1;
    font-weight: 600;
}

.task-dates.completed label {
    font-weight: 400;
    margin: 0;
}

.completed-tick {
    display: inline-block;
    margin: 0 20px;
}

.completed-tick i {
    color: #EFAC00;
    font-size: 20px;
    font-weight: bold;
}

.task-dates {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 7px 10px;
    line-height: 14px;
    color: #75716B;
    text-align: center;
    display: inline-block;
    min-width: 120px;
}

.taskdates--item {
    margin-top: 16px;
}

.taskdates--item .bold {
    font-weight: 600;
}

.task-detail-wrapper {
    margin-top: 16px;
    margin-bottom: 20px;
}

.dueing .task-dates {
    border-color: #F16321;
    color: #F16321;
}

.past .task-dates {
    border-color: #EE4056;
    color: #EE4056;
}

.dueing .task-dates {
    border-color: #F16321;
    color: #F16321;
}

.task--item2 {
    padding: 10px 24px;
    border-bottom: 1px solid rgba(189, 193, 193, 0.2);
    cursor: pointer;
    background: #fff;
}

.task--item2 table{
    width: 100%;
}
.task--item2.ui-draggable-dragging{
    position: relative;
    z-index: 10;

    background: #FFF !important; 
    border-radius: 12px;
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 30%);
}

.task--item2.ui-draggable-dragging td{
    background: #FFF !important; 
}

.task--item2.non-clickable{
    cursor: default;
}

.task--item2.completed .item-icon--panel i {
    color: #00B485;
}

.task--item2.past .item-icon--panel i {
    color: #EE4056;
}

.task--item2.dueing .item-icon--panel i {
    color: #F16321;
}

.project-item-quick-edit--content{
    display: none;
    padding-left: 30px;
    position: relative;
}

.subtask--number{
  width: 50%;
  display: inline-block;
}

.quick-edit-subtask--panel .indication-arrows,
.project-item-quick-edit--content .indication-arrows{
    color: #75716B;
}
.quick-edit-subtask--panel .indication-arrows.active,
.project-item-quick-edit--content .indication-arrows.active{
    color: #EFAC00;
}
.project-item-quick-edit--content .form-group,.template-task--table .form-group{
    margin: 0 0;
    min-width: 100px;
}

.project-item-quick-edit--content label.error,.project-item-quick-edit--content .help-block{
    display: none !important;
}

.project-item-quick-edit--content input.error,.project-item-quick-edit--content select.error{
    border:  1px solid red !important;
}
.project-item-quick-edit--content .form-control{
    /*max-width: 250px;*/
    width: 85%; 
    
}

.project-item--content .form-control.teamMemberIDs,
.project-item-quick-edit--content .form-control.teamMemberIDs{
    /*max-width: 250px;*/
    /* width: 85%; */
    width: 100%;
}
.project-item-quick-edit--content table{
    width: 100%;
    table-layout: fixed;
}
.quick-edit--btn span:first-child{
    display: inline-block;
}
.quick-edit--btn span{
    display: none;
}

.quick-edit--btn.disabled,.quick-edit--btn.disabled:hover{
    background: #E5E5E1;
    border-color: #E5E5E1;
    color: #75716B;
    font-weight: 700;
}
.quick-edit--btn.disabled span:first-child{
    display: none;
}
.quick-edit--btn.disabled span{
    display: inline-block;
}
.project-item-quick-edit--content table  tr td{
    padding: 0 3px;
}

.project-item-quick-edit--content .datepicker{
    /*min-width: 120px;*/
    width: 100%;
}

.project-item-quick-edit--content .dropdown-menu,.project-item--content .dropdown-menu{
    width:  450px;
    max-height: 400px;
    overflow: auto;
}

.project-item-quick-edit--content .requirement--panel.dropdown-menu,.project-item--content .requirement--panel.dropdown-menu{
    padding: 20px 10px;
}

.project-item-quick-edit--content .icon-Basics_Settings,
.quick-edit-mode .icon-Basics_Settings{
    font-size: 22px;
    margin-left: -30px;
    display: inline-block;
    vertical-align: middle;
}



.quick-edit-has-subtask div{
    display: none;
}

.quick-edit-no-subtask div:first-child{
    display: none;
}

.quick-edit-no-subtask div,.quick-edit-has-subtask div:first-child{
    display: block;
}

.task--item2.quick-edit-mode,.task--item2.quick-edit-mode td{
    background: #fff ;
}

.task--item2.quick-edit-mode td.task-name--display{
    padding-right:35px;
}

.task--item2 .task-settings--group,.task--item2 .quick-edit-subtask--panel{
    display: none;
}

.task--item2.quick-edit-mode .task-settings--group,.task--item2.quick-edit-mode .quick-edit-subtask--panel{
    display: inline-block;
}



.task--item2.quick-edit-mode:not(.has-completed-subtask):not(.completed):not(.flagged) .project-item-quick-edit--content,
.milestone--item.quick-edit-mode .milestone-item-quick-edit--content{
    display: block;
}
.task--item2.quick-edit-mode:not(.has-completed-subtask):not(.completed):not(.flagged) .project-item--content,
.milestone--item .milestone-item-quick-edit--content{
    display: none;
}
.milestone-item-quick-edit--content {
    position: relative;
    padding-left:  70px;
    padding-right: 150px;
}
.task--item2.quick-edit-mode.ui-draggable-dragging .delete--subtask-btn3{
  display: none;
}

.delete-milestone--btn,.delete-milestone--btn:hover,.delete-milestone--btn:focus{
    display: inline-block;
    background: #EE4056;
    line-height: 36px;
    padding: 0 ;
    width:  36px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    margin-right: 10px;
}

.add-task-milestone--btn,.add-task-milestone--btn:hover{
    display: inline-block;
    background: #FFD200;
    line-height: 36px;
    padding: 0 ;
    width:  36px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.milestone-item-quick-edit--content .quick-edit-label{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);

    font-size: 14px;
}

.milestone-item-quick-edit--content .milestone-name{
    padding-left: 10px;
}

.milestone--item.quick-edit-mode .milestone-item-non-quick-edit--content{
    display: none;
}

.completed-quick-edit--item .icon-Basics_Task
{
    color: #00B485;
    font-size: 30px;
}
.completed-quick-edit--item .icon-Action_Flag_Selected{
    color: #EE4056;
    font-size: 30px;   
}
.completed-quick-edit--item .taskStatus{
    margin: 0 0 10px 0;
}

.view-task--panel {
    display: block;
    position: relative;
    min-height: 100vh;
}

.edit-task--panel {
    display: none;
    position: relative;
}

.reply-task--panel{
    display: none;
}

.taskStatus.complete {
    background: #00B485;
    font-weight: 600;
    border: 0px;
    color:#FFFFFF;
}

.taskStatus,
.taskdates--item {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 8px 16px;
    color: #75716B;
    text-align: center;
    display: inline-block;
    min-width: 120px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #75716B;
}

.taskdates--item {
    margin-top: 16px;
}

.taskdates--item .bold {
    font-weight: 600;
}

.edit-task--form,
.view-task--form {
    padding-top: 20px;
}

.taskNameTxt {
    font-size: 19px;
    line-height: 25px;
    font-weight: 700;
    margin-bottom: 8px;
}

.taskDescriptionTxt {
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 32px;
}

.remove-canvas-parent-task--btn,
.remove-canvas-parent-task--btn:hover,
.remove-canvas-parent-task--btn:focus {
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
    background: #EE4056;
    color: #fff !important;
    text-align: center;
    z-index: 2;
    top: -8px;
    text-decoration: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.remove-canvas-parent-task--btn i,
.remove-canvas-parent-task--btn:hover i,
.remove-canvas-parent-task--btn:focus i {
    line-height: 50px;
    font-size: 20px;
    text-decoration: none;
}

.offcanvas-pane .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn).fullwidth {
    width: 100% !important;
}

.add-project-close--btn {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 36px;
    height: 36px;
    color: #000;
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 36px;
    margin-top: -18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
}

.add-project-close--btn.no-border {
    border: none;
}

.add-project-close--btn .icon-Action_Add {
    font-size: 20px;
    vertical-align: middle;
}


/*keyslog*/

.keylog-project-details--thumbnail {
    /*height:250px; */
    position: relative;
    padding-top: 100%;
    border: 1px solid #C0BFBB;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin: 0;
}

.keylog-project-listing .project--item {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #C0BFBB;
    padding: 24px 40px 24px 50px;
    position: relative;
}

.keylog-project-listing .project--item.disable-check {
    padding-left: 10px;
}

.keylog-project-listing .project--item.disable-check .selection {
    display: none;
}

.keylog-project-listing .project--item.disable-check .project-item--content {
    padding: 0 0px 0 0;
}

.keylog-project-listing .project--item .selection {
    position: absolute;
    left: 10px;
    cursor: pointer;
    height: 28px;
    top: 50%;
    margin-top: -14px;
}

.keylog-project-listing .project--item .project-item--content {
    cursor: pointer;
    color: #000;
    text-decoration: none;
    font-size: 19px;
    line-height: 25px;
    padding-bottom: 20px;
    position: relative;
}

.keylog-project-listing .project--item .project-item--content.with-thumbnail {
    padding-left: 70px;
}

.keylog-project-listing .project--item .project-item--content .project-item--thumbnail {
    position: absolute;
    overflow: hidden;
    width: 60px;
    height: 60px;
    left: 0;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.keylog-project-listing .project--item .project-item--content .project-item--thumbnail img {
    width: 150%;
    /*vertical-align: middle;
  display: inline-block;*/
}

.keylog-project-listing .project--item .project-item--content a:not(.contact-me--btn),
.keylog-project-listing .project--item .project-item--content a:not(.contact-me--btn):hover,
.keylog-project-listing .project--item .project-item--content a:not(.contact-me--btn):focus {
    display: inline-block;
    text-decoration: none;
    color: #000;
    padding: 10px;
}

.keylog-project-listing .project--item .project-name,
.keylog-project-listing .project--item a {
    font-weight: 700;
}

.keylog-project-listing .project--item .project-key-holder {
    font-weight: 400;
    font-weight: 17px;
    line-height: 23px;
    margin-top: 10px;
}

.keylog-project-listing .project--item .project-key-holder.teamMember--color {
    /*color: rgba(50, 177, 230, 1);*/
    color: #EFAC00;
}

.keylog-project-listing .project--item .project-key-holder.tray--color,
.keylog-project-listing .project--item .project-key-holder.tray--color a,
.tray--txt,
.tray--txt:hover,
.tray--txt:focus {
    color: #32B1E6;
}

.keylog-project-listing .project--item .project-key-holder.handover--color,
.keylog-project-listing .project--item .project-key-holder.handover--color a {
    color: #75716B;
}

.handover--color,
.handover--color:hover,
.handover--color:focus {
    color: #75716B;
}

.keylog-project-listing .project-key-date {
    color: rgba(117, 113, 107, 1);
    font-size: 15px;
    line-height: 19px;
    margin-top: 10px;
    font-weight: 400;
}

.keylog-project-listing .project--item .project-key-holder i {
    display: inline-block;
    margin-right: 10px;
}

.keylog-project-listing .project--item .project-item--icon {
    position: absolute;
    top: 50%;
    right: -40px;
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    margin: -10px 0 0 0;
}
/*from garage */
#content .contact-info--quickbar{
    margin-left: -260px;
}
.contact-info--quickbar {
    position: fixed;
    bottom: -100%;
    z-index: 1055;
    left: 50%;
    margin-left: -300px;
    height: 204px;
    background-color: green;
    width: 100%;
    max-width: 600px;
    background: #F5F5F5;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 40px 20px;
    box-shadow: 0px -17px 29px rgba(75, 54, 0, 0.07), 0px -6.20528px 10.5855px rgba(75, 54, 0, 0.0482987), 0px -3.01255px 5.13905px rgba(75, 54, 0, 0.0389404), 0px -1.47681px 2.51926px rgba(75, 54, 0, 0.0310596), 0px -0.583932px 0.996119px rgba(75, 54, 0, 0.0217013)
}

#content .sticky-action--bar{
    margin-left: -260px;
}
.sticky-action--bar {
    /*display: none;*/
    /*position: -webkit-sticky; 
  position: sticky; */
    /*position: fixed;*/
    position: fixed;
    /*top: 0px; */
    bottom: -100%;
    height: 195px;
    width: 100%;
    left: 0;
    background: #383633;
    z-index: 2;
    color: #fff;
    padding: 24px 24px 64px;
    box-shadow: 0px -17px 29px rgba(75, 54, 0, 0.07), 0px -6.20528px 10.5855px rgba(75, 54, 0, 0.0482987), 0px -3.01255px 5.13905px rgba(75, 54, 0, 0.0389404), 0px -1.47681px 2.51926px rgba(75, 54, 0, 0.0310596), 0px -0.583932px 0.996119px rgba(75, 54, 0, 0.0217013);
    border-radius: 12px 12px 0px 0px;
    margin: 20px 0 0 0;
    max-width: 600px;
    left: 50%;
    margin-left: -300px;
}

.search-keylog {
    position: relative;
    padding-left: 20px;
    margin-top: 40px;
}

.search-keylog .search-close--btn {
    position: absolute;
    right: 10px;
    bottom: 15px;
    width: 30px;
    height: 30px;
    display: none;
}

.search-keylog input[type=search] {
    border: 0;
    border-bottom: 1.5px solid #000;
    position: relative;
    left: -20px;
    width: calc(100% + 20px);
    padding-left: 30px;
    padding-right: 40px;
    height: 56px;
}

.search-keylog i {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -12px 0 0 0;
    font-size: 24px;
    color: #000;
}

.keylog-profile--dropdown {
    text-align: left;
    display: none;
    position: absolute;
    width: 234px;
    height: 200px;
    background: #F5F5F5;
    right: 0;
    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: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;
}

.keylog-profile-dropdown--header {
    padding: 20px 15px;
    border-bottom: 1px solid #C0BFBB;
}

.keylog-profile-dropdown--header div {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keylog-profile-dropdown--content a,
.keylog-profile-dropdown--content a:hover,
.keylog-profile-dropdown--content a:focus {
    display: block;
    padding: 0 10px 0 40px;
    line-height: 57px;
    color: #000000;
    text-decoration: none;
    position: relative;
}

.keylog-profile-dropdown--content a i {
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -10px;
    font-size: 20px;
}

.keylog-profile-dropdown--content a:hover {
    background: #FFD200 !important
}

.reached-end {
    text-align: center;
    color: #75716B;
    padding: 50px 0;
    display: none;
}

.bootstrap-select>.dropdown-toggle {
    background: white !important;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height: 40px;
    outline: none !important;
    padding: 6px 10px;
}

.bootstrap-select>.dropdown-toggle:focus {
    background: white !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height: 40px;
    outline: none !important;
    padding: 6px 10px;
}

.bootstrap-select>.dropdown-toggle,
.searchFilter--form .bootstrap-select>.dropdown-toggle:focus {
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height: 40px;
    outline: none !important;
    padding: 6px 10px;
}

.bootstrap-select.disabled{
    cursor: default;
}

.bootstrap-select.disabled>.dropdown-toggle,
.searchFilter--form.disabled .bootstrap-select>.dropdown-toggle:focus{
    background: transparent !important;
    opacity: 1;
    padding: 6px 0;
    border: none;
}

.bootstrap-select.disabled>.dropdown-toggle .filter-option-inner-inner{
    background: transparent;
}

.bootstrap-select.disabled>.dropdown-toggle .bs-caret{
    display: none;
}

.filter-option-inner-inner {
    font-size: 17px;
    line-height: 24px;
    /*line-height: 20px;*/
    font-weight: 400;
    text-transform: none;
    background: #fff;
}


/*makeoverlog canvas*/

.offcanvas-head .offcanvas-tools a.btn.btn-icon-toggle {
    position: relative;
    top: -12px;
    width: 50px;
    height: 50px;
    right: 5px;
}

.offcanvas-head .offcanvas-tools a.btn.btn-icon-toggle i {
    top: 0;
    font-size: 30px;
    line-height: 40px;
}

.offcanvas-feed--title {
    line-height: 20px;
    width: 100%;
    padding-top: 5px;
    font-size: 20px;
    font-weight: 700;
}

#offcanvas-feed-category .input-container,
#offcanvas-feed-filter .input-container {
    padding-left: 0;
    padding-right: 30px;
    display: block;
    margin-bottom: 0;
}

#offcanvas-feed-category .input-container span,
#offcanvas-feed-filter .input-container span {
    position: absolute;
    right: 0;
}

#offcanvas-feed-category .checkmark,
#offcanvas-feed-filter .checkmark {
    left: auto;
    right: 0;
}

#offcanvas-feed-category .offcanvas-body {
    padding: 20px;
}

#offcanvas-feed-category ul,
#offcanvas-feed-filter ul {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

#offcanvas-feed-category ul li,
#offcanvas-feed-filter ul li {
    border-bottom: 1px solid #C0BFBB;
    padding: 10px 0;
}

#offcanvas-feed-category ul li:last-child,
#offcanvas-feed-filter ul li:last-child {
    border-bottom: none;
}

#offcanvas-feed-category ul li i {
    display: none;
}

#offcanvas-feed-category ul li a,
#offcanvas-feed-filter ul li a {
    text-decoration: none;
    display: block;
    padding: 0;
}

.offcanvas-head~.offcanvas-body {
    /*margin-top:  40px;*/
    width: 100%;
    padding-bottom: 40px !important;
}

.reply-task--panel .offcanvas-head .offcanvas-tools,
#offcanvas-post .offcanvas-head .offcanvas-tools {
    z-index: 100;
    /*background: #fff;*/
    font-weight: 700;
    left: 0;
    padding: 10px 0 0 15px;
    width: 98%;
}

.reply-task--panel .offcanvas-head .offcanvas-tools a,
#offcanvas-post .offcanvas-head .offcanvas-tools a {
    z-index: 10;
    position: relative;
    top: -5px;
}

.reply-task--panel .offcanvas-header-label,
#offcanvas-post .offcanvas-header-label{
    line-height:14px; 
    width:100%; 
    padding-top: 5px;

    font-family: 'Platform Bold', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.05em;
    color: #000000;
}

.reply-task--panel .main-post--panel .timeline-label,
#offcanvas-post .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-task--panel .main-post--panel .timeline-date,
#offcanvas-post .main-post--panel .timeline-date{
    display: flex;
}

.reply-task--panel .main-post--panel .timeline-date .timeline-date-wrapper,
#offcanvas-post .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-task--panel .main-post--panel .timeline-date .timeline-date-wrapper:first-child,
#offcanvas-post .main-post--panel .timeline-date .timeline-date-wrapper:first-child{
    margin-right: 8px;
}

.reply-task--panel .main-post--panel .timeline-task-title,
#offcanvas-post .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-task--panel .main-post--panel .timeline-task-sub-title,
#offcanvas-post .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-task--panel .main-post--panel .timeline-status,
#offcanvas-post .main-post--panel .timeline-status{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.reply-task--panel .main-post--panel .timeline-status .timeline-status-complete,
#offcanvas-post .main-post--panel .timeline-status .timeline-status-complete{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    background: #00B485;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
}

.reply-task--panel .main-post--panel .timeline-status .timeline-status-complete.flag--item,
#offcanvas-post .main-post--panel .timeline-status .timeline-status-complete.flag--item{
    background: #FCDEDF;
    color: #EE4056;
}

.reply-task--panel .main-post--panel .timeline-status .timeline-status-icon,
#offcanvas-post .main-post--panel .timeline-status .timeline-status-icon{
    display: flex;
}

.reply-task--panel .main-post--panel .timeline-status i,
#offcanvas-post .main-post--panel .timeline-status i{
    color: #00B485;
    width: 26px;
    height: 26px;
    font-size: 26px;
}

.reply-task--panel .main-post--panel .timeline-status .complete--item i,
#offcanvas-post .main-post--panel .timeline-status .complete--item i{
    color: #00B485;
}

.reply-task--panel .main-post--panel .timeline-status .flag--item i,
#offcanvas-post .main-post--panel .timeline-status .flag--item i{
    color: #EE4056;
}

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

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

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

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

.mb-32{
    margin-bottom: 32px;
}

.reply-task--panel .main-post--panel .timeline-task-description,
#offcanvas-post .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-task--panel .main-post--panel .timeline-profile,
#offcanvas-post .main-post--panel .timeline-profile{
    margin-right: 8px;
}

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

.reply-task--panel .main-post--panel .timeline-user--designation,
#offcanvas-post .main-post--panel .timeline-user--designation {
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
    margin: 0;
}

.reply-task--panel .main-post--panel .main-post-description,
#offcanvas-post .main-post--panel .main-post-description{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 16px;
}

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

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

.reply-task--panel .timeline-footer .feed-footer-date,
#offcanvas-post .timeline-footer .feed-footer-date{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

.reply-task--panel .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;
}

#offcanvas-post .feed-media-container{
    display: flex;
    margin-bottom: 16px;
}

#offcanvas-post .feeds--item.task--item .feed-media-container.document{
    display: grid;
}

.reply-task--panel .feed-media-container{
    display: flex;
}

.reply-task--panel .feed-media-container .feed-media-wrapper,
#offcanvas-post .feed-media-container .feed-media-wrapper{
    display: flex;
    margin-right: 8px;
}

.reply-task--panel .feed-media-container .feed-media-wrapper:only-child,
#offcanvas-post .feed-media-container .feed-media-wrapper:only-child{
    margin-right: 0;
}

.reply-task--panel .feed-media-container .feed-media-wrapper{
    margin-right: 0;
}

.reply-task--panel .feed-media-container.document .feed-media-wrapper,
#offcanvas-post .feed-media-container.document .feed-media-wrapper{
    margin: 0;
    margin-bottom: 8px;
}

#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;
}

/*.reply-task--panel .feed-media-container{
    height: 130px;
}

.reply-task--panel .feed-media-container .container-child:first-child{
    
}

.reply-task--panel .feed-media-container .container-child:last-child{
    display:flex; 
    flex:1; 
    flex-direction: column;
}*/

.reply-task--panel .timeline-profile,
#offcanvas-post .timeline-profile{
    width: 42px;
    height: 42px;
}

.reply-task--panel .thumbnail--overlay,
#offcanvas-post .thumbnail--overlay{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.3); 
    font-size: 50px; 
    line-height: 1.5;
}

.reply-task--panel .thumbnail--overlay span,
#offcanvas-post .thumbnail--overlay span{
    font-family: 'Platform Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0.05em;
    color: #FFFFFF;

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

.reply-task--panel .offcanvas-profile-panel,
#offcanvas-post .offcanvas-profile-panel{
    margin-bottom: 16px;
}

.offcanvas-pane.offcanvas-fixed-head {
    overflow: hidden;
}

.offcanvas-pane.offcanvas-fixed-head .offcanvas-body {
    overflow: auto;
    height: calc(100% - 40px);
    /*display: flex;*/
    /*flex-direction: column;*/
}

.offcanvas-pane header {
    padding-top: 30px;
    font-size: 22px;
    line-height: 28px;
    font-family: 'Platform Bold', Arial;
    padding: 20px 15px 0 15px;
}

.offcanvas-pane {
    z-index: 2000;
    width: 500px;
    background-color: #F5F5F5;
}

.offcanvas-pane.active {
    transform: translate(-500px, 0px) !important;
}


/*.offcanvas-pane a,
.offcanvas-pane a:hover,
.offcanvas-pane a:focus{
  color: #EFAC00;
  font-weight: 500 !important;
  text-decoration: none;
}*/

.offcanvas-level1--overlay,.offcanvas-level1-2--overlay{
    position: absolute;
    width: 100%;
    top: -70px;
    height: calc(100% + 70px);
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    z-index: 2000;
    bottom: 0;
}

.offcanvas-level1-2--overlay{
  display: none;
}
.offcanvas-level1--overlay .loading-ani{
  background: rgb(171,171,171); position: sticky; top: 0px; width: 100%; height: calc(100vh );
}

.offcanvas-level1--overlay .loading-ani .timeline-lottie-label{
  color: #000;

}
.offcanvas-level2--overlay {
    position: absolute;
    width: 100%;
    top: -96px;
    height: calc(100% + 96px);
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    z-index: 2000;
    bottom: 0;
    min-height: 100vh;
    
}

.offcanvas2 {
    z-index: 1200;
    width: 350px;
    transform: translate(0) !important;
    background: #F5F5F5;
    overflow-x: visible !important;
}

.offcanvas2.active {
    transform: translate(-850px, 0px) !important
}

.inline-subtaskPanel{
    background: #FFFFFF;
    padding: 16px;
    
    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);
    
}
.subtaskPanel {
    background: #FFFFFF;
    padding: 16px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    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);
    margin-bottom: 20px;
}

.task-tech-spec-container {
    display: flex;
    flex-direction: column;
}

.task-tech-spec-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16px;
}

.task-tech-spec-wrapper:last-child {
    margin-bottom: 0px;
}

.task-tech-spec-wrapper .icon-wrapper {
    margin-right: 8px;
}

.task-tech-spec-wrapper .icon-wrapper i {
    font-size: 20px;
    color: #EFAC00;
}

.task-tech-spec-wrapper .task-tech-spec-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}

.task-requirement--listing,
.task-tech-spec--listing,
.task-requirement2--listing {
    list-style: none;
    margin: 0;
    padding: 0;
}


.task-requirement--listing li{
  padding:0 !important;
}



.task-requirement2--listing {
    margin-left: 30px;
}

.task-tech-spec--listing li {
    font-size: 15px;
    line-height: 19px;
    color: #75716B;
    min-height: 25px;
}

.add-subtask--panel,
.add-subtask--panel:hover,
.add-subtask--panel2,
.add-subtask--panel2:hover
 {
    font-size: 17px;
    line-height: 60px;
    text-decoration: none;
    font-weight: 400;
    color: #000;
    display: block;
    position: relative;
    padding-left: 70px;
    margin: 0px 0 48px 0;
    border: 1px dashed #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.add-subtask--panel2,
.add-subtask--panel2:hover{
    margin-bottom: 0;
}
.btn2.whatsapp-btn,
.btn2.whatsapp-btn:focus,
.btn2.whatsapp-btn:hover {
    background: #00B485 !important;
    color: #fff !important;
    padding: 0 30px;
    line-height: 36px;
}

.btn2.whatsapp-btn i {
    position: relative;
    top: 5px;
    font-size: 24px;
}

.delete-btn,.delete-btn:hover,.delete-btn:active,.delete-btn:focus{
    background-color: #EE4056;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    color: #fff;
    text-transform: none;
    font-weight: 700;
}

.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;
}


/*button[type=button]:not(.dropdown-toggle):not(.btn-default),
input[type=button]:not(.dropdown-toggle):not(.btn-default),
button[type=button]:not(.dropdown-toggle):not(.btn-default):focus,
input[type=button]:not(.dropdown-toggle):not(.btn-default):focus,
button[type=button]:not(.dropdown-toggle):not(.btn-default):hover,
input[type=button]:not(.dropdown-toggle):not(.btn-default):hover{
    width: auto;
    text-decoration: none !important;
}*/

button[type=submit],
input[type=submit],
button[type=submit]:focus,
input[type=submit]:focus,
button[type=submit]:hover,
input[type=submit]:hover,
.btn3,
.btn3:hover,
.btn3:focus,
.btn3:active
{
    line-height: 48px !important;
    min-width: 120px;
    padding: 0 20px;
    text-decoration: none;

}
button[type=reset],
input[type=reset],
button[type=reset]:focus,
input[type=reset]:focus,
button[type=reset]:hover,
input[type=reset]:hover,
button[type=button].btn:not(.dropdown-toggle):not(.btn-default),
input[type=button].btn:not(.dropdown-toggle):not(.btn-default),
button[type=button].btn:not(.dropdown-toggle):not(.btn-default):focus,
input[type=button].btn:not(.dropdown-toggle):not(.btn-default):focus,
button[type=button].btn:not(.dropdown-toggle):not(.btn-default):hover,
input[type=button].btn:not(.dropdown-toggle):not(.btn-default):hover{
    line-height: 46px;
    min-width: 120px;
    text-decoration: none;
    border: 1px solid #000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    color: #000;
    text-transform: none;
    font-weight: 700;
    background: #fff;
}

.med-size{
    line-height: 50px !important;
}

.subtask--listing,
.parentTask--listing {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.parentTask--listing li:first-child {
    padding-top: 0;
}

.subtask--listing li,
.parentTask--listing li {
    position: relative;
    padding: 20px 0;
    border-top: 1px solid #C0BFBB;
}

.subtask-label {
    font-size: 17px;
    line-height: 23px;
    font-weight: 600;
    color: #75716B;
    margin-top: 20px;
    margin-bottom: 20px;
}

.task-tech-spec--listing li span {
    color: #000;
}

.task-tech-spec--listing li.with-icon {
    padding-left: 30px;
    position: relative;
}

.task-tech-spec--listing li.with-icon i {
    font-size: 20px;
    position: absolute;
    left: 0;
    color: #EFAC00;
}

.task-tech-spec-container {
    display: flex;
    flex-direction: column;
}

.task-tech-spec-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16px;
}

.task-tech-spec-wrapper:last-child {
    /*margin-bottom: 0px;*/
    margin-bottom: 24px;
}

.task-tech-spec-wrapper .icon-wrapper {
    margin-right: 8px;
}

.task-tech-spec-wrapper .icon-wrapper i {
    font-size: 20px;
    color: #EFAC00;
}

.task-tech-spec-wrapper .task-tech-spec-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}

.task-tech-spec-detail .title-text {
    flex: 0 0 24%;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #75716B;
}

.task-tech-spec-detail .description-text {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    color: #000000;
}

.task-tech-spec-detail .description-text.dark-yellow {
    color: #EFAC00;
}

.task-tech-spec-detail .description-text.grey {
    color: #75716B
}

.no-assignee-txt{
  font-style:italic;
  font-weight:normal;
  font-size:14px;
  color:#EE4056;
}

.task-popup--left {
    float: left;
    box-shadow: 0px 15px 12px rgba(0, 0, 0, 0.22), 0px 19px 38px rgba(0, 0, 0, 0.3);
    width: 55%;
}

.task-popup--right {
    float: left;
    width: 45%;
    padding-top: 40px;
    padding-left: 20px;
    height: 500px;
    position: relative;
    overflow: auto;
}

.task-popup--right #orderTools {
    margin-bottom: 40px;
}

#orderTools .company-group--row {
    display: block;
}

.task-row.gantt_row div .pending-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

.task-row.gantt_row div .approved-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: #4caf50;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

.task-reply-container{
    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;
}

.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;
}

.task-reply-container .task-reply-wrapper i{
    font-size: 18px;
    font-weight: 500;
    color: #75716B;
}

.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-reply-container .task-reply-wrapper:last-child{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
    margin: 0;
}

.subtask--item .task-reply-container{
    margin-bottom: 16px;
}

/*.task-reply-container .task-reply-wrapper:last-child i{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}*/

.task-reply-arrow-icon{
    background-image: url('../images/task-reply-arrow-icon.svg');
    width: 20px;
    height: 20px;
}

.level2 {
    background: orange
}

.task-row.gantt_row .overdue-indicator {
    color: #fff !important;
}

.milestone-row.gantt_row .gantt_cell.gantt_cell_tree {
    text-decoration: underline;
}

.gantt_row .overdue-indicator {
    color: #fff !important;
}

.weekend {
    background: #f4f7f4;
}

.gantt_cal_larea {
    overflow: visible;
}

.gantt_cal_chosen,
.gantt_cal_chosen select {
    width: 500px;
}

.gantt_grid_head_cell[column_id='add'] {
    display: none
}

.readyonly {
    background: #ededed;
    box-shadow: none;
    border: 1px solid black;
    padding: 5px;
    /*color: #;   */
}


/*.disable-add-row .gantt_add,.task-row .gantt_add{*/

.disable-add-row .gantt_add,
.task-row .gantt_add,
.role-Designer .gantt_add,
.role-TPG .gantt_add,
.role-CREW .gantt_add {
    display: none !important
}

.gantt_delete_btn_set {
    display: none
}


/*.gantt_grid_scale .gantt_grid_head_cell,  
        .gantt_task .gantt_task_scale .gantt_scale_cell {   
            font-weight: bold;  
            font-size: 14px;    
            color: rgba(0, 0, 0, 0.7);  
        }*/

.gantt_row div {
    /*color: #066265 !important;*/
    color: #066265 !important;
    font-weight: bold
}

.warning-row {
    background-color: orange !important;
    color: #fff !important;
}

.rush-row {
    background-color: red !important;
    color: #fff;
}

.warning-row div,
.rush-row div {
    color: #fff !important
}

.task-row.gantt_row div {
    /*color: #066265 !important;*/
    color: #454545 !important;
    font-weight: normal;
}

.resourceGrid_cell .gantt_row div {
    /*color: #066265 !important;*/
    font-weight: normal color: #454545 !important;
}

.gantt_task_content {
    display: none
}

.hideItem {
    display: none;
}


/*
        .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_task_row.gantt_selected,.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover{
            background: #0aa89e !important
        }

        

        .gantt_row .gantt_cell{
            color: #fff !important;
        }*/


/*.eachtaskitem.fc-event{
          display: none
        }*/

.fc-event,
.fc-event-dot {
    background: #299cb4
}


/*@import url('https://fonts.googleapis.com/css?family=Roboto:500');*/

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gantt_control {
    background: #ededed;
    text-align: center;
}

.gantt_control input[type=button],
.gantt_control input[type=file],
.gantt_control input[type=checkbox],
.gantt_control button {
    font: 500 14px Roboto;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: #fff;
    padding: 4px 12px;
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 20px;
}

.gantt_control input[type=button]:hover,
.gantt_control button:hover {
    border: 1px solid #B3B3B3;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.gantt_control input[type=button]:active,
.gantt_control button:active {
    background: #F7F7F7;
}

.gantt_control input[type=button]:focus,
.gantt_control button:focus {
    outline: none !important;
}

.gantt_control {
    padding: 10px 0 12px;
}

.gantt_control input[type=radio],
.gantt_control input[type=checkbox] {
    display: none;
}

.gantt_control label {
    vertical-align: bottom;
    position: relative !important;
    line-height: 14px !important;
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.54);
    font: 14px Roboto;
    line-height: 20px;
    letter-spacing: 0.2px;
}

.material-icons {
    position: relative;
    top: 6px;
    right: 2px;
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.icon_color {
    color: #0288D1;
}

.material-icons.md-inactive {
    color: rgba(0, 0, 0, 0.38);
}

.checked_label {
    color: rgba(0, 0, 0, 0.7)!important;
}

.gantt_radio:checked,
.gantt_radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

.gantt_radio:checked+label,
.gantt_radio:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.gantt_radio:checked+label:before,
.gantt_radio:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.gantt_radio:checked+label:after,
.gantt_radio:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #8a9ada;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.gantt_radio:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.gantt_radio:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.gantt_row .show-completion--btn {
    background: #9b7ad3;
    cursor: pointer;
    color: #fff !important;
    border-radius: 3px;
    margin: 3px;
    display: inline-block;
    width: 30px;
    line-height: 25px;
    text-align: center;
}

.gantt_row .show-completion--btn.ready {
    background: orange;
}

.gantt_row .show-completion--btn.completed {
    background: green;
}

.ticketing {
    display: none
}

.refresh {
    /*display: none*/
}

#projectSummaryModal .modal-body ul,
#projectSummaryModal .modal-body ol {
    list-style: none
}

#projectSummaryModal .modal-body ul>li>.listingName {
    text-decoration: underline;
    width: 60%;
}

#projectSummaryModal .modal-body ol li .listingName {
    text-decoration: none;
}

.listingNo {
    width: 5%;
    display: inline-block;
}

.listingName {
    width: 55%;
    display: inline-block;
}

.listingCompletion {
    width: 30px;
    text-align: center;
    display: inline-block;
}

.back-project--btn {
    background: #caf0ee;
    display: inline-block;
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33)
}

.gantt_task_line {
    background: #555555
}

.gantt_task_progress {
    background: #4caf50
}

#gantt_here .deadline {
    position: absolute;
    border-radius: 12px;
    border: 2px solid #585858;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: 6px;
    z-index: 1;
    background: url("common/deadline_icon.png") center no-repeat;
}

#gantt_here .overdue-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

#gantt_here .task-row.gantt_row div .pending-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: rgb(255, 60, 60);
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

#gantt_here .task-row.gantt_row div .approved-indicator {
    width: 16px;
    margin-top: 10px;
    height: 16px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff !important;
    background: #4caf50;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
}

#gantt_here .level2 {
    background: orange
}

#gantt_here .task-row.gantt_row .overdue-indicator {
    color: #fff !important;
}

#gantt_here .milestone-row.gantt_row .gantt_cell.gantt_cell_tree {
    text-decoration: underline;
}

#gantt_here .gantt_row .overdue-indicator {
    color: #fff !important;
}

#gantt_here .weekend {
    background: #f4f7f4;
}

#gantt_here .gantt_cal_larea {
    overflow: visible;
}

#gantt_here .gantt_cal_chosen,
#gantt_here .gantt_cal_chosen select {
    width: 500px;
}

#gantt_here .gantt_grid_head_cell[column_id='add'] {
    display: none
}

#gantt_here .readyonly {
    background: #ededed;
    box-shadow: none;
    border: 1px solid black;
    padding: 5px;
    /*color: #;   */
}

#gantt_here .task-row .gantt_add,
#gantt_here .role-Designer .gantt_add,
#gantt_here .role-TPG .gantt_add,
#gantt_here .role-CREW .gantt_add {
    /*display: none*/
}

#gantt_here .gantt_delete_btn_set {
    display: none
}


/*.gantt_grid_scale .gantt_grid_head_cell,  
        .gantt_task .gantt_task_scale .gantt_scale_cell {   
            font-weight: bold;  
            font-size: 14px;    
            color: rgba(0, 0, 0, 0.7);  
        }*/

#gantt_here .gantt_row div {
    text-decoration: none !important;
    color: #066265 !important;
    font-weight: bold
}

#gantt_here .warning-row {
    background-color: orange !important;
    color: #fff !important;
}

#gantt_here .rush-row {
    background-color: red !important;
    color: #fff;
}

#gantt_here .warning-row div,
#gantt_here .rush-row div {
    color: #fff !important
}

#gantt_here .task-row.gantt_row div {
    /*color: #066265 !important;*/
    color: #454545 !important;
    font-weight: normal;
}

#gantt_here .resourceGrid_cell .gantt_row div {
    /*color: #066265 !important;*/
    font-weight: normal color: #454545 !important;
}

#gantt_here .gantt_tree_content a {
    text-decoration: underline;
}

#gantt_here .gantt_task_content {
    display: none
}

#gantt_here .hideItem {
    display: none;
}

#gantt_here .fc-event,
#gantt_here .fc-event-dot {
    background: #299cb4
}

#gantt_here .gantt_control {
    background: #ededed;
    text-align: center;
}

#gantt_here .gantt_control input[type=button],
#gantt_here .gantt_control input[type=file],
#gantt_here .gantt_control input[type=checkbox],
#gantt_here .gantt_control button {
    font: 500 14px Roboto;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: #fff;
    padding: 4px 12px;
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 20px;
}

#gantt_here .gantt_control input[type=button]:hover,
#gantt_here .gantt_control button:hover {
    border: 1px solid #B3B3B3;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

#gantt_here .gantt_control input[type=button]:active,
#gantt_here .gantt_control button:active {
    background: #F7F7F7;
}

#gantt_here .gantt_control input[type=button]:focus,
#gantt_here .gantt_control button:focus {
    outline: none !important;
}

#gantt_here .gantt_control {
    padding: 10px 0 12px;
}

#gantt_here .gantt_control input[type=radio],
#gantt_here .gantt_control input[type=checkbox] {
    display: none;
}

#gantt_here .gantt_control label {
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.54);
    font: 14px Roboto;
    line-height: 20px;
    letter-spacing: 0.2px;
}

#gantt_here .material-icons {
    position: relative;
    top: 6px;
    right: 2px;
    color: rgba(0, 0, 0, 0.54);
}

#gantt_here .material-icons.icon_color {
    color: #0288D1;
}

#gantt_here .material-icons.md-inactive {
    color: rgba(0, 0, 0, 0.38);
}

#gantt_here .checked_label {
    color: rgba(0, 0, 0, 0.7)!important;
}

#gantt_here .gantt_radio:checked,
#gantt_here .gantt_radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

#gantt_here .gantt_radio:checked+label,
#gantt_here .gantt_radio:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

#gantt_here .gantt_radio:checked+label:before,
#gantt_here .gantt_radio:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

#gantt_here .gantt_radio:checked+label:after,
#gantt_here .gantt_radio:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #8a9ada;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#gantt_here .gantt_radio:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

#gantt_here .gantt_radio:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#gantt_here .gantt_row .show-completion--btn {
    background: #9b7ad3;
    cursor: pointer;
    color: #fff !important;
    border-radius: 3px;
    margin: 3px;
    display: inline-block;
    width: 30px;
    line-height: 25px;
    text-align: center;
}

#gantt_here .gantt_row .show-completion--btn.ready {
    background: orange;
}

#gantt_here .gantt_row .show-completion--btn.completed {
    background: green;
}

#gantt_here .ticketing {
    display: none
}

#gantt_here .refresh {
    display: none
}

#projectSummaryModal .modal-body ul,
#projectSummaryModal .modal-body ol {
    list-style: none
}

#projectSummaryModal .modal-body ul>li>.listingName {
    text-decoration: underline;
    width: 60%;
}

#projectSummaryModal .modal-body ol li .listingName {
    text-decoration: none;
}

#gantt_here .listingNo {
    width: 5%;
    display: inline-block;
}

#gantt_here .listingName {
    width: 55%;
    display: inline-block;
}

#gantt_here .listingCompletion {
    width: 30px;
    text-align: center;
    display: inline-block;
}

#gantt_here .back-project--btn {
    background: #caf0ee;
    display: inline-block;
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33)
}

#gantt_here .gantt_task_line {
    background: #555555
}

#gantt_here .gantt_task_progress {
    background: #4caf50
}


/*main ui styles*/

h1 {
    margin: 20px 0;
    padding: 0;
    font-family: 'Platform Bold', Arial;
}

.section-title {
    font-size: 19px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
}

.light-grey-indication {
    color: #C4C4C4;
}

.red-indication {
    color: #C62828;
}

.green-indication {
    color: #0aa89e;
}

.orange-indication {
    color: #FFA000;
}

.blue-indication {
    color: #27B1FA;
}

.rounded-icon {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #fff;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
}

.rounded-icon.green {
    background: #0AA89E;
    color: #fff;
}

.small-padding2 {
    padding: 5px;
}

.card-head .tools {
    padding-right: 0;
}


/*page*/


/*3 steps ordering page*/

.header-tools .active .item .selected {
    border-bottom: 2px solid #EFAC00;
    line-height: 63px;
    font-size: 15px;
}
.header-tools.short-ver{
/*    border: 1px solid red;*/
    right: 20px;
    padding-right: 0;
}
.header-tools.short-ver .active .item {
    text-align: center;
}
.header-tools .active .item a{
    display: block;
}

.tertiary-menu .item a:hover {
    text-decoration: none
}

.tertiary-menu .item a {
    height: 40px;
    display: inline-block;
    padding: 5px 10px 5px 10px;
}

.tertiary-menu .item.selected a {
    border-bottom: 1px solid #0AA89E
}

.order-company--summary {
    background: #F6F6F6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.calculator-side--panel a {
    padding: 10px;
    line-height: 16px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.calculator-side--panel a:hover {
    text-decoration: none;
}

.calculator-side--panel a.active {
    background: #0BA89F;
    color: #fff;
}

.company--item {
    margin-bottom: 20px;
    display: none;
    min-height: 600px
}

.company--item.active {
    display: block;
}

.company-empty-products-panel {
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 20px;
}

.company-empty-products-panel a {}

.order-company--cart .dataTables_filter,
.order-company--cart .dataTables_length {
    display: none
}

.order-company--cart input[type=number] {
    height: 20px;
    width: 70px;
}

.order-company--cart table.dataTable thead th,
.order-company--cart table.dataTable thead td,
.order-company--cart table.dataTable tbody td {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.customized-calculator td .form-group {
    padding: 0;
    margin: 0;
}

.customized-calculator td .form-group.has-error input {
    border: 1px solid red;
}

.totalMargin.great {
    color: #00ff00
}

.totalMargin.good {
    color: #00ffff
}

.totalMargin.subpar {
    color: #ff0000
}

.product-row.added {
    background: green;
    color: #fff;
}

.companySection .product-row.added input[type=number] {
    display: none
}

tr.product-row td,
.customized-calculator tr td,
.customized-calculator tr th {
    line-height: 14px !important;
    padding: 5px !important;
}

.customized-calculator tr td input[type=number] {
    width: 50px;
}

.customized-calculator tr th {
    text-align: center;
}

.pagination-panel a {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ededed;
    margin: 0 3px;
}

.pagination-panel a.active {
    background: #ededed
}


/*margin order*/
.create-CE--link,
.create-CE--link:hover {
    color: #07557E !important;
    text-transform: uppercase;
    font-size: 24px;
    text-decoration: none
}

.ce-table .create-CE--link {
    font-size: 14px
}


/*role page*/

.role-content {
    min-height: 400px
}


/*overwrite plugins*/


/*select2*/

.select2-locked {
    padding: 6px 5px 6px 5px !important;
}


/*grids*/


/*table*/

.table {
    margin: 0;
}

.action-panel {
    padding: 5px 0 0 0 !important;
    position: relative;
}
.row-action-panel{
    padding: 10px 20px 0 0 !important;
    position: relative;   
    
}

.row-action-panel i{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    right: 20px;
    top: 15px;

}

.small-padding .action-panel .contextual-menu--icon,
.small-padding2 .action-panel .contextual-menu--icon,
table tr td.action-panel .contextual-menu--icon {
    top: 0px !important;
}


/*.contextual-menu--icon i{
  margin-top: 5px;
}*/

.action-panel .contextual-menu--icon {
    top: 2px;
    position: absolute;
    right: 5px
}

.action-panel .card-head .tools>.btn-group,
.action-panel .btn-group {
    margin-right: 0 !important
}


/*table*/

.list-filter {
    position: relative;
    display: inline-block;
    padding-right: 20px;
    margin-top: 10px;
}

.list-filter .list-filter--group {
    position: relative;
}

.list-filter .list-filter--group span {
    float: left;
    font-size: 12px
}

.list-filter .list-filter--group select {
    color: #0AA89E;
    font-size: 12px;
    height: auto !important;
    margin: 0;
    float: left !important;
    display: inline-block;
    width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding-right: 20px;
    position: relative;
    z-index: 2
}

.list-filter .list-filter--group select+i {
    position: absolute;
    right: 0;
    top: -3px;
    font-size: 20px;
}

.data-listings {
    margin-top: 24px;
    margin-bottom: 24px;
}


/*main ui styles*/

.red-btn {
    background: rgba(252, 231, 231, 1);
    color: rgba(198, 40, 40, 1);
    border: 1px solid rgba(198, 40, 40, 1);
}

.red-btn:hover,
.red-btn:focus {
    background: rgba(198, 40, 40, 1);
    color: rgba(252, 231, 231, 1);
    border: 1px solid rgba(198, 40, 40, 1);
}

.style-primary-light2 {
    background: #FFD200;
    color: #fff;
}

.no-bot-pad {
    padding-bottom: 0;
}

.card-body2 {
    padding: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.dropdown-toggle:hover {
    text-decoration: none;
}

.dropdown-toggle2{  
  display: inline-block;  
  transform-origin: 50% 50%;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transition: 0.1s ease-in-out;
  -webkit-transition: 0.1s ease-in-out;
  -moz-transition: 0.1s ease-in-out;

  font-size: 18px;
} 
.dropdown-toggle2.active{ 
  transform: rotate(0deg);  
  -webkit-transform: rotate(0deg);  
  -moz-transform: rotate(0deg); 
} 
.stage-group:last-child .milestone-group:last-child  .dropdown-menu{  
  transform: translate(-30px);  
  -webkit-transform: translate(-30px);  
  -moz-transform: translate(-30px); 
  top: auto;  
  bottom: 0;  
}

.contextual-menu--icon .dropdown-toggle {
    display: block;
}

.project--item .contextual-menu--icon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.54);
    top: 10px;
    /*padding-top: 5px;*/
}

.project--item .contextual-menu--icon .dropdown-toggle i{
    position: relative;
    top: 7px;
}
.project--item .gap {
    margin-top: 20px !important;
}

.project--item .project-card{
    margin: -25px;
    padding: 20px !important;
    height: 100%;
}

.project--item .not-in-team-text{
  /*position:absolute;
  bottom:10px;
  left:20px;*/
  padding-top:15px;
  display:inline-block;
}

.project-progress-txt{
    margin: 5px 0 0 0 ;
}
.project-progress-txt span{
    display: inline-block;
    width: 48%;
    vertical-align: top;
}


.project-progress.progress {
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #C0BFBB;
    margin: 10px 0 0 0;
}


.yellow-bar .progress-bar{
    background: #FFD200;
}

.yellow-bar .progress-bar{
    background: #FFD200;
}


.project-progress.red-bar {
    background: rgba(252, 231, 231, 1)
}

.project-progress.blue-bar {
    background: #b8dae6;
}

.project-progress.green-bar {
    background: rgba(10, 168, 158, 0.2)
}



.project-progress.grey-bar {
    background: #E8E8E8;
}

.project-progress.red-bar .progress-bar {
    background: rgba(198, 40, 40, 1)
}

.milestone-exceed-dueDate-panel{
  display: flex;
  align-items: center;
  margin-top: 4px;
  z-index: 9999;

  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #EE4056;
}

.milestone-exceed-dueDate-panel i{
  font-size: 20px;
  margin-right: 8px;
}

.btn-group.open .dropdown-toggle {
    box-shadow: none
}

.filter-notification {
    font-size: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
}

.card-body {
    display: block;
    position: relative;
}

a.card-body {}

.step-indicator-container{
    display: flex;
    flex-direction: column;
    height: 360px; 
    overflow-y: auto;
    /*margin: 16px 24px 0;*/
    margin: 0 24px 0 0;

    /*to avoid the outer circle color from cut off from TMOG head*/
    padding-right: 20px;
    padding-left: 24px;
}

.makeover-update--widget .timeline-container .timeline-wrapper::-webkit-scrollbar-track,
.media-list-container::-webkit-scrollbar-track,
.document-list-container::-webkit-scrollbar-track,
.step-indicator-container::-webkit-scrollbar-track{
/*    margin-top: 16px;*/
/*    margin-bottom: 16px;*/
    background-color: #E6E5E1;
}

.makeover-update--widget .timeline-container .timeline-wrapper::-webkit-scrollbar,
.media-list-container::-webkit-scrollbar,
.document-list-container::-webkit-scrollbar,
.step-indicator-container::-webkit-scrollbar{
    background-color: unset;
}

.makeover-update--widget .timeline-container .timeline-wrapper::-webkit-scrollbar-thumb,
.media-list-container::-webkit-scrollbar-thumb,
.document-list-container::-webkit-scrollbar-thumb,
.step-indicator-container::-webkit-scrollbar-thumb{
    background-color: #EFAC00;
}

.makeover-duration-panel{
  display: flex;
  align-items: center;
  text-align: center;

  padding: 8px 16px;
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

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

  margin-bottom: 16px;
}

.payment-reminder-panel{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  background: #383633;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  margin-bottom: 16px;
}

.payment-reminder-panel.eye-closed{
  background: #383633;
  opacity: 0.5;
}

.payment-reminder-panel i{
  color: #FFFFFF;
  font-size: 20px;
}

.reminder-icon-wrapper{
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.show-icon {
    content: url("../images/show-icon.svg");
}

.step-indicator 
{
    display: flex;
    align-items: center;
}

.step-indicator.no-running-milestone{
  min-height: 30px;
}

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

.step-indicator hr{
    height: 24px;
    border: 1px dotted;
    border-style: none dotted none none;
    color: #000000;
    margin: 0px auto 0px 15px;
}

.step-indicator hr.done{
    border: 1px solid #000000;
    border-width: 0.5px;
}

.step-indicator .step-indicator-wrapper{
    display: flex;
    align-items: center;
    align-content: center;
    /*justify-content: space-evenly;*/
    width: 100%;
}

.step-indicator .step-indicator-line{
    display: flex; 
    width: 100%;
}

.step-indicator-wrapper .milestone-title{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}

.step-indicator-wrapper.active .milestone-title{
    font-weight: 700;
    line-height: 24px;
}

.step-indicator-wrapper .weekly-label{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #C0BFBB;
}

.step-indicator-wrapper.active .weekly-label,
.step-indicator-wrapper.done .weekly-label{
    color: #75716B;
}

.step 
{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.step-indicator.column .step{
    justify-content: center;
    margin-right: 16px;
    width: 32px;
}

.step-indicator .step-icon 
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #c2c2c2;
    font-size: 10px;
    text-align: center;
    color: #ffffff;
    position: relative;
    line-height: 50px;
    font-size: 20px;
}

.step-indicator .step-icon
{
    position: relative;
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.step.done .step-icon 
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #000000;
    text-align: center;
}

.step.star .step-icon{
  height: 18px;
  width: 18px;
  text-align: center;
}

.step-indicator .step.star .step-icon{
  border: none;
}

.step.active
{
    background: rgba(255,210,0, 0.7);
    /*border: 0.5px solid #EFAC00;*/
    box-shadow: 0 0 0 4px rgba(255,210,0, 0.5), 0 0 0 9px rgba(255,210,0, 0.2);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    transform: translate(0px, 0px) !important;
}

.step.active .step-icon
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #FFD200;
    border: 0.5px solid #EFAC00;
}

.step p 
{
  text-align: center;
  position: absolute;
  bottom: -40px;
  color: #c2c2c2;
  font-size: 14px;
  font-weight: bold;
}

.step.active p 
{
  color: crimson;
}

.step.step2 p,
.step.step3 p 
{
  left: 50%;
  transform: translateX(-50%);
}

.indicator-line 
{
    height: 1.5px;
    flex: 1;
    margin: 0px 4px;
    background: #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.dotted-line
{
    background: #FFFFFF;
    border-style: dotted;
    border-width: 1px 0px;
    border-color: #000000;
    border-image-slice: 54% 0%;
    border-image-repeat: round;
}

.dotted-line--vertically-center{
    background: #FFFFFF;
    border-style: dotted;
    border-width: 1px 0px;
    border-color: #000000;
    border-image-slice: 30% 0%;
    border-image-repeat: round;
    margin: 15px 0px;
}

.info-box--step-indicator--tick-icon
{
    content: url("../images/tick.svg");
}

.info-box--step-indicator--tmog-head-icon
{
    content: url("../images/tmogHead.svg");
}

.info-box--step-indicator--featured-icon{
    content: url("../images/featured.svg");
}

.offcanvas--body--dotted-line-icon
{
    border-image-source: url("../images/dotted.svg");
}

.disclaimer-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;

    border: 1px solid #EE4056;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    width: 100%;
    margin-top: 24px;
}

.disclaimer-container.center{
  justify-content: center;
  margin-top: 16px;
}

.disclaimer-container .disclaimer-text{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #EE4056;
}

/*.btn{
  padding: 3px 14px;
}*/


.btn-mark-done,
.btn-mark-done:hover {
    color: #ffffff;
    background-color: #2196F3;
    border-color: #2196F3
}

.btn i {
    position: relative;
    top: 0;
    margin-right: 10px;
}

.workplace-sticky {
    display: flex;
}

.timelineHTML .dropdown-menu {
    max-height: 300px;
    overflow: auto;
}

.dropdown-menu>li>a.disabled {
    color: #9E9E9E;
}

.dropdown-menu.pma-dropdown {
    max-height: 300px;
    overflow: auto;
    background: #fff
}

.dropdown-menu.pma-dropdown-menu .input-container {
    padding-left: 0;
    margin-bottom: 0;
}

.dropdown-menu.pma-dropdown-menu .input-container img {
    display: none;
}

.dropdown-menu.pma-dropdown-menu .checkmark,
.dropdown-menu.pma-dropdown-menu input[type=checkbox] {
    display: none;
}

.dropdown-menu.pma-dropdown-menu>li>a i.zmdi {
    position: absolute;
    left: 8px;
    top: 10px;
    font-size: 14px
}

.dropdown-menu.pma-dropdown-menu>li>a i.zmdi~.zmdi {
    position: absolute;
    left: auto;
    right: 8px;
}

.dropdown-menu>li>a {
    position: relative;
    white-space: normal;
    width: 100%;
    /*padding-left: 27px !important;
    padding-right: 25px !important;*/
    font-size: 15px;
    line-height: 19px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
}

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

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

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



.dropdown-menu .divider {
    margin: 0;
}

.btn{
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-block;
}
.circle--btn i{
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 50%;
    margin-left: -7px;
}
/*
input[type=submit],
input[type=submit]:hover,
button[type=submit],
button[type=submit]:hover {
    line-height: 48px;
    position: relative;
    
    margin-right: 3px;
    background-color: #FFD200;
    border: none;
    color: #000;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0px 20px;
    min-width: 120px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-transform: none;
    text-decoration: none !important;
}

*/
.card {
    display: block;
    background: #fff;
}

.main-card {
    margin-bottom: 0;
/*    background: #f5f5f5;*/
}

.card2 {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
    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);
}

.table>thead>tr>th {
    background: #f5f5f5;
}

.card:hover {
    text-decoration: none
}

.dataTables_filter.search-panel {
    float: left !important;
    padding: 0 10px;
    margin: 0 !important;
    border-bottom: 1.5px solid #000000;
    position: relative;
}

.dataTables_filter.search-panel input {
    border: none;
    padding: 0 5px 0 0;
    margin: 0 !important;
    width: 362px;
    font-family: 'DM Sans', sans-serif;
    /*font-style: italic;*/
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    outline: none;
}
.dataTables_filter.search-panel .left-icon{
    font-size: 16px;
    top: 2px;
    position: relative;
}
.dataTables_filter.search-panel .clear-search--btn,.dataTables_filter.search-panel .clear-search--btn:hover{
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 10px;
}
.dataTables_filter.search-panel input::-webkit-input-placeholder { /* Edge */
  font-style: italic;
  color: #75716B;
}

.dataTables_filter.search-panel input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-style: italic;
  color: #75716B;
}

.dataTables_filter.search-panel input::placeholder {
  font-style: italic;
  color: #75716B;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    /*width: 140px !important;*/
}

.row-no-gutters {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.row-no-gutters>[class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.mog-container-fluid {
    margin: 0;
    width: 100%;
}

.garage-container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 30px;
    padding-right: 30px;
}

.modal {
    z-index: 1201 
}

.second-overlay{
  background: rgba(0,0,0,0.3); position: fixed; width: 100%;  height: 100%; z-index: 1249; top:0; left: 0; right:0; bottom:0; display: none;
}


/*.mfp-bg{
  z-index: 1100 !important
}
.mfp-content{
  z-index: 1101 !important
}*/

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


/*order details start*/

.order-item--indication {
    position: relative;
    padding-left: 44px;
}

.order-item--indication .rounded-icon {
    position: absolute;
    left: 22px;
    top: 2px;
    cursor: pointer;
}

.order-item--indication .indication-icon {
    position: absolute;
    left: 0;
    top: -5px;
    position: absolute;
    font-size: 20px
}

.expand-row--below {
    cursor: pointer;
    position: absolute;
    left: 22px;
}

.shopping-list--orders {
    display: none
}

.category-item--btn,
.category-item--btn:hover {
    text-decoration: none;
}

.category-item--btn.selected {
    text-decoration: underline;
}

.order-company--summary {
    background: #F6F6F6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.calculator-side--panel a {
    padding: 10px;
    line-height: 16px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.calculator-side--panel a:hover {
    text-decoration: none;
}

.calculator-side--panel a.active {
    background: #0BA89F;
    color: #fff;
}

.company--item {
    margin-bottom: 20px;
    display: none;
    min-height: 600px
}

.company--item.active {
    display: block;
}

.company-empty-products-panel {
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 20px;
}

.company-empty-products-panel a {}

.order-company--cart .dataTables_filter,
.order-company--cart .dataTables_length {
    display: none
}

.order-company--cart input[type=number] {
    /*height: 20px;*/
    width: 70px;
}

.order-company--cart table.dataTable thead th,
.order-company--cart table.dataTable thead td,
.order-company--cart table.dataTable tbody td {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

.customized-calculator td .form-group {
    padding: 0;
    margin: 0;
}

.customized-calculator td .form-group.has-error input {
    border: 1px solid red;
}


/*.companySection{
    border: 1px solid black; 
    padding: 20px
}
.companySection table td{
    line-height: 14px;
    padding: 5px;
}

.companySection table td input[type=number],.companySection input[type=number]{
    border: 1px solid black;
    width:50px;
}
.companySection .add-mini-cart--btn{
    display: block;

}


*/

.totalMargin.great {
    color: #00ff00
}

.totalMargin.good {
    color: #00ffff
}

.totalMargin.subpar {
    color: #ff0000
}

.product-row.added {
    background: green;
    color: #fff;
}

.companySection .product-row.added input[type=number] {
    display: none
}

tr.product-row td,
.customized-calculator tr td,
.customized-calculator tr th {
    line-height: 14px !important;
    padding: 5px !important;
}

.customized-calculator tr td input[type=number] {
    width: 50px;
}

.customized-calculator tr th {
    text-align: center;
}

.pagination-panel a {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #ededed;
    margin: 0 3px;
}

.pagination-panel a.active {
    background: #ededed
}

.product-item {
    margin-bottom: 40px;
    padding: 10px;
}


/*.product-item .form-group{
  margin-top: 0;
  padding-top: 0 !important;
}*/

.product-item figure {
    padding-top: 95%;
    position: relative;
    overflow: hidden;
}

.product-item figure img {
    position: absolute;
    top: 0;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

.product-item .btn {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    display: block;
}


/*order details ends*/


/*social media starts*/

.reply-box {
    background: rgba(255, 210, 0, 0.12);
    padding: 5px 10px;
    border-left: 2px solid #FFD200;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: block;
    margin-bottom: 20px;
}

.reply-box.with-attachment {
    padding-right: 80px !important;
    position: relative;
}

.reply-box.deleted-msg,
.deleted-msg {
    font-style: italic;
}

.reply-box .reply-user {
    color: #fff;
    font-weight: bold
}

.reply-box .reply-has-img {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
}

.reply-box .reply-has-img img {
    display: block;
    max-width: 50px;
    max-height: 50px;
    margin: 0 auto;
}

.reply-box:hover {
    text-decoration: none;
}

@keyframes highlight {
    0% {
        background: #faebd4;
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: highlight 2s;
}

.sm-download--caption {
    height: 24px;
    padding: 5px 0 0 0;
    font-size: 10px;
    position: absolute;
    bottom: 0;
    background: rgba(245, 246, 247);
    width: 100%
}

.doc-icon {
    width: 50px;
    margin: 10px auto 0 auto !important
}

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

.filter-timeline {
    position: relative;
}

.filter-timeline i {
    display: none
}

.filter-timeline.selected i {
    display: block;
}

.timeline--filter {
    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 .badge {
    left: 15px;
    display: block;
}

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

.timeline--filter .btn-group {
    top: -5px;
}

.timeline--filter i {
    margin-right: 10px;
}

.timeline--filter .dropdown-toggle {
    font-size: 20px
}

/*.pma-timeline li.own-bubble .timeline-topic {
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    line-height: 15px;
    padding: 2px 7px;
    background: #fff;
}*/

.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;
}

.timeline-topic.empty{
    border: none;
    color: transparent;
    background: transparent;
}

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

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

.timeline-only--panel {
    position: relative;
    min-height: 50px
}

.timeline-loading--panel {
    height: 50px;
    position: relative;
    display: none
}

.search-loading {
    position: absolute;
    right: 25px;
    top: 15px;
    z-index: 2;
    width: 20px;
    height: 20px;
    display: none;
}

.search-loading img {
    display: block;
    width: 100%;
}

.social-media--item {
    position: relative;
    text-align: center;
    border: 1px solid #C0BFBB;
    box-sizing: border-box;
    height: 100px;
    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;
}

.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;
    z-index: 10;
    color: #fff;
    pointer-events: none;
}

.social-media--item .thumbnail--overlay {
    padding-left: 20px;
    z-index: 60;
}

.social-media--item .thumbnail--overlay span,
.project-cost-images--container .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%);
}

.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-view-title{
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 20px;
}

.task-view-title i{
  margin-right: 10px;
}

.updates-done--panel .social-media--item{
    border-radius: unset;
    border: none;
}

.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;
}

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

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

.reply-task--panel .social-media--item{
    height: 130px;
    width: 100%;
}

.reply-task--panel .pma-timeline .social-media--item{
    height: 76px;
}

.reply-task--panel .social-media--item.document{
    /*height: 40px;*/
    height: 100%;
    width: 80%;
}

.more-file-panel{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-decoration-line: underline;
    color: #EFAC00;
    cursor: pointer;
}

.updates-done--panel .more-file-panel{
    color: #FFD200;
    margin-bottom: 8px;
}

.reply-task--panel .pma-timeline .updates-done--panel .more-file-panel{
    color: #EFAC00;
}

.pma-timeline li.own-bubble .more-file-panel{
    color: #B07B2A;
}

/*module landing*/

.card-header--link,
.card-header--link:hover {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 5px;
    padding: 15px 24px;
    text-decoration: none
}

.card-header--link i {
    position: absolute;
    right: 15px;
    top: 14px;
}

.card-head {
    min-height: 50px
}

.card-head header.header-module--panel {
    position: relative;
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(186, 186, 186, 0.5);
/*    height: 64px;*/
    min-height: 64px;
    padding-top: 24px;
    padding-bottom: 16px;
    padding-right: 520px;
    padding-left: 25px;
    overflow: hidden;
    font-weight: 700;
    font-size: 30px;
    line-height: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    /*margin-right: 300px;*/
}
.client-view-project--page .card-head header.header-module--panel,
.view-project--page .card-head header.header-module--panel,
.edit-project-task--page .card-head header.header-module--panel{
  font-size:24px;
  padding-top:19px;
  padding-left:30px;
  font-family:'Platform Bold';
  letter-spacing:0.03em;
}

.card-head header.header-module--panel>span {
    display: inline-block;
    padding-left: 0px;
    font-family:'Platform Bold';
    letter-spacing:0.03em;
}

.card-head header.header-module--panel a {
    line-height: 60px;
    display: inline-block;
    padding: 0 15px;
    color: rgba(0, 0, 0, 0.6);
}

.card-head header.header-module--panel a:hover {
    text-decoration: none
}

.card-head header.header-module--panel>span {
    white-space: nowrap;
/*    overflow: hidden;*/
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    height: 25px;
}

.card-head header.header-module--panel .header-back--btn {
    position: absolute;
    left: 20px;
    top: 0px;
    font-weight: 400;
    height: 100%;
    line-height: 30px;
    color: transparent;
    background-image: url('../images/back-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    content: "";
}

.card-head header.header-module--panel .header-back--btn:hover {
    text-decoration: none
}

.card-head header.header-module--panel a.selected {
    color: #EFAC00;
    border-bottom: 1px solid #FFD200;
}

.view-menu {
    min-width: 300px
}

.dropdown-menu.m{
  min-width: 520px;
}

.view-menu.dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.view-menu.dropdown-menu ul li {
    padding-right: 60px;
    position: relative;
    line-height: 14px;
    padding: 16px;
}

.view-menu.dropdown-menu ul li .switch {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 40px;
    height: 15px;
}

.view-menu.dropdown-menu .slider.round:before {
    left: 0;
    top: -5px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
    background: #F1F1F1
}

.view-menu.dropdown-menu .slider.round {}

.view-menu.dropdown-menu input:checked+.slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
    background: #FFD200
}

.view-menu.dropdown-menu input:checked+.slider {
    background-color: rgba(255, 210, 0, 0.2)
}

.view-menu hr{
  height: 1px;
  background-color: #E6E5E1;
  border: none;
}

.header-tools {
    width: 500px;
    height:100%;
    position: absolute;
    right: 0;
    font-size: 14px;
    top: 0;
    line-height: 50px;
    min-height: 50px;
    padding-right: 65px;
    font-weight: 400
}

.header-tools2 {
    width: 400px;
    position: absolute;
    right: 0;
    font-size: 14px;
    top: 0;
    line-height: 50px;
    min-height: 50px;
    /*padding-right: 20px;*/
}

.header-tools2 .nav {
    float: right;
    ;
}

.header-tools3{
    width: 200px; position: absolute; right: 40px; top: 0
}
.header-tools .owl-nav {
    position: absolute;
    right: -65px;
    top: 0;
    
}

.header-tools .owl-carousel .owl-nav.disabled {
    display: none;
}

.header-tools .owl-carousel .owl-nav button.disabled span {
    color: rgba(0, 0, 0, 0.3)
}

.header-tools .owl-nav button:focus {
    outline: none
}

.header-tools .owl-nav button span {
    font-size: 30px;
    padding: 0 10px;
    display: inline-block;
    border-left: 1px solid rgba(186, 186, 186, 0.5);
    line-height: 64px;
}


/*flex grid*/

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

.row.flex-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.row.flex-grid .col-1,
.row.flex-grid .col-2,
.row.flex-grid .col-3,
.row.flex-grid .col-4,
.row.flex-grid .col-5,
.row.flex-grid .col-6,
.row.flex-grid .col-7,
.row.flex-grid .col-8,
.row.flex-grid .col-9,
.row.flex-grid .col-10,
.row.flex-grid .col-11,
.row.flex-grid .col-12,
.row.flex-grid .col,
.row.flex-grid .col-auto,
.row.flex-grid .col-sm-1,
.row.flex-grid .col-sm-2,
.row.flex-grid .col-sm-3,
.row.flex-grid .col-sm-4,
.row.flex-grid .col-sm-5,
.row.flex-grid .col-sm-6,
.row.flex-grid .col-sm-7,
.row.flex-grid .col-sm-8,
.row.flex-grid .col-sm-9,
.row.flex-grid .col-sm-10,
.row.flex-grid .col-sm-11,
.row.flex-grid .col-sm-12,
.row.flex-grid .col-sm,
.row.flex-grid .col-sm-auto,
.row.flex-grid .col-md-1,
.row.flex-grid .col-md-2,
.row.flex-grid .col-md-3,
.row.flex-grid .col-md-4,
.row.flex-grid .col-md-5,
.row.flex-grid .col-md-6,
.row.flex-grid .col-md-7,
.row.flex-grid .col-md-8,
.row.flex-grid .col-md-9,
.row.flex-grid .col-md-10,
.row.flex-grid .col-md-11,
.row.flex-grid .col-md-12,
.row.flex-grid .col-md,
.row.flex-grid .col-md-auto,
.row.flex-grid .col-lg-1,
.row.flex-grid .col-lg-2,
.row.flex-grid .col-lg-3,
.row.flex-grid .col-lg-4,
.row.flex-grid .col-lg-5,
.row.flex-grid .col-lg-6,
.row.flex-grid .col-lg-7,
.row.flex-grid .col-lg-8,
.row.flex-grid .col-lg-9,
.row.flex-grid .col-lg-10,
.row.flex-grid .col-lg-11,
.row.flex-grid .col-lg-12,
.row.flex-grid .col-lg,
.row.flex-grid .col-lg-auto,
.row.flex-grid .col-xl-1,
.row.flex-grid .col-xl-2,
.row.flex-grid .col-xl-3,
.row.flex-grid .col-xl-4,
.row.flex-grid .col-xl-5,
.row.flex-grid .col-xl-6,
.row.flex-grid .col-xl-7,
.row.flex-grid .col-xl-8,
.row.flex-grid .col-xl-9,
.row.flex-grid .col-xl-10,
.row.flex-grid .col-xl-11,
.row.flex-grid .col-xl-12,
.row.flex-grid .col-xl,
.row.flex-grid .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.row-cols-1>* {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.row-cols-2>* {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.row-cols-3>* {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row-cols-4>* {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.row-cols-5>* {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.row-cols-6>* {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.row.flex-grid .col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.row.flex-grid.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.row.flex-grid .col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.row.flex-grid .col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row.flex-grid .col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.row.flex-grid .col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.row.flex-grid .col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.row.flex-grid .col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.row.flex-grid .col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.row.flex-grid .col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.row.flex-grid .col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.row.flex-grid .col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

#gantt_here {
    width: 100%;
    height: 90%;
    min-height: 100px;
}

.project-masthead-theme{
    position: relative;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;

    margin: 16px 0px;

    width: 100%;
    height: 250px;
}

.project-masthead-theme .camera-icon-container 
{
    display: flex;
    padding: 8px;
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;

    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
    text-align: center;
    margin: 0;
}

.project-masthead-theme .camera-icon-container i{
    font-size: 20px;
}

.owner-info-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0px 24px 24px;
}

.owner-info-container .owner-profile-panel .owner-profile-img{
    width: 50px;
    height: 50px;
}

.owner-info-container .owner-profile-info i{
    font-size: 20px;
    color: #EFAC00;
}

.owner-info-container .owner-contact-panel i{
    font-size: 20px;
}
.owner-info-container .owner-contact-panel .owner-contact-wrapper{
    display: flex;
    padding: 8px;
    width: 36px;
    height: 36px;

    cursor: pointer;
    text-align: center;

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

.enquiry-support--widget{
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 12px;
}

.makeover-update--widget,
.makeover-info--widget{
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 12px;
    height: 100%;
}

.action-edit-panel,
.makeover-update--widget .action-add-panel,
.makeover-info--widget .action-add-panel,
.enquiry-support--widget .action-add-panel{
    display: block;
    padding: 8px;

    width: 36px;
    height: 36px;

    cursor: pointer;
    text-align: center;

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

    margin: 0;
}

.action-edit-panel i,
.makeover-update--widget .action-add-panel i,
.makeover-info--widget .action-add-panel i,
.enquiry-support--widget .action-add-panel i{
    font-size: 20px;
    font-weight: bold;
}

.makeover-update--widget .header-panel,
.makeover-info--widget .header-panel{
    padding: 24px 24px 0px;
}

.makeover-update--widget .header-panel.bottom-line{
  padding-bottom: 8px;
  border-bottom: 1px solid #E6E5E1;
}

.support-list-container .support-list-wrapper{
    padding-bottom: 24px;
    border-bottom: 1px solid #E6E5E1;
}

.support-list-container .support-list-wrapper:not(:first-child){
    padding-top: 24px;
}

.support-list-container .support-list-wrapper:last-child,
.support-list-container .support-list-wrapper:only-child{
    padding-bottom: 0;
    border-bottom: none;
}

.support-info-container{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.support-info-container .support-profile-panel .support-profile-img{
    width: 30px;
    height: 30px;
}

.support-info-container .support-profile-info i{
    font-size: 20px;
    color: #EFAC00;
}

.support-info-container .support-setting-panel i{
    font-size: 26px;
}

.project-status-list-panel .project-status-list-wrapper{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 4px 16px;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    margin-right: 8px;
    margin-bottom: 8px;
}

.widget--tab-section
{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.widget--tab-section .card .card-head{
    padding: 0px 24px;
}

.widget--tab-section .card .card-body{
    padding: 0;
}

.widget--tab-section .tab-content .tab-pane{
    border-top: 1px solid #C0BFBB;
    border-bottom: 1px solid #C0BFBB;
    margin-bottom: 24px;
}

.widget--tab-section .tab-content .tab-pane.yellow-bg{
    background: url(../images/workplacebg.png) repeat;
}

.nav-tabs.nav-justified > li > a{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
}

.nav-tabs.nav-justified{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.nav-tabs.nav-justified > li{
    flex: 1;
}

.nav-tabs.nav-justified > .active, 
.nav-tabs.nav-justified > .active:hover, 
.nav-tabs.nav-justified > .active:focus
{
    border-bottom: 2px solid #EFAC00;
    font-weight: 700;
    color: #000000;
}

.nav-tabs.nav-justified > a:first-child, 
.nav-tabs.nav-justified > a:first-child:hover, 
.nav-tabs.nav-justified > a:first-child:focus{
    margin-left: 24px;
}

.nav-tabs.nav-justified > a:last-child, 
.nav-tabs.nav-justified > a:last-child:hover, 
.nav-tabs.nav-justified > a:last-child:focus{
    margin-right: 24px;
}

.widget--tab-section .card-custom-styling
{
    margin-bottom: 0px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.nav-tabs.nav-justified > li > a,
.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
    border: none;
    padding: 0;
}

.nav-tabs.nav-justified > .active > a, 
.nav-tabs.nav-justified > .active > a:hover, 
.nav-tabs.nav-justified > .active > a:focus{
    display: inline-block;
    vertical-align: middle;
}

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus{
    font-weight: 700;
    color: #000000;
}

.reminder-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    filter: drop-shadow(0px 7px 27px rgba(75, 54, 0, 0.05)) drop-shadow(0px 2.92443px 11.28px rgba(75, 54, 0, 0.0359427)) drop-shadow(0px 1.56354px 6.0308px rgba(75, 54, 0, 0.0298054)) drop-shadow(0px 0.876509px 3.38082px rgba(48, 34, 0, 0.025)) drop-shadow(0px 0.465507px 1.79553px rgba(75, 54, 0, 0.0201946)) drop-shadow(0px 0.193708px 0.747159px rgba(75, 54, 0, 0.0140573));
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.reminder-container .reminder-image-panel{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: #FFD200;

    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.reminder-container .reminder-text-panel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 8px;
    height: 100%;
    background: #383633;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;

    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.document-list-container{
    display: flex;
    flex-direction: column;
    padding: 16px 0px 0 24px;
    margin-right: 16px;

    height: 400px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: url(../images/workplacebg.png) repeat;
}

.document-list-container .document-list-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    border: 1px solid #000000;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;

    margin-right: 16px;
    margin-bottom: 8px;
}

.document-list-container .document-list-wrapper i{
    color: #EFAC00;
}

.media-list-container{
    display: flex;
    flex-direction: column;
    margin: 0 24px 0 0;
    padding-top: 16px;
    padding-left: 24px;

    height: 400px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: url(../images/workplacebg.png) repeat;
}

.makeover-info-container .media-list-container{
    height: 100%;
    overflow-y: unset;
    overflow-x: unset;
    margin: 0;
    padding: 0;
    background: unset;
}

.media-list-container .media-list-wrapper{
    padding: 0;
    padding-right: 16px;
    position: relative;
}

.media-list-container .media-list-uploaded {
    display: block;
    overflow: hidden;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 100%;
    padding-top: 100%;
    position: relative;
    margin-bottom: 16px;
    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);

    cursor: pointer;
    text-align: center;
}

.media-list-container .dropbox-panel{
    display: flex;
    flex-direction: column;
}

.makeover-update--widget .timeline-container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

.makeover-update--widget .timeline-container .timeline-wrapper {
    height:  100%;
    min-height: 1px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: url("../images/workplacebg.png") repeat;
}

.makeover-update--widget .timeline-container.empty-timeline{
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.timeline-container .timeline-wrapper .timeline-listing{
    margin: 16px 24px;
    padding: 0;
    list-style: none;
}

.makeover-update--widget .timelineHTML {
    height:  calc(100vh - 144px);
    min-height: 500px;
}

.timeline-listing .bullet-dot{
    margin: 0 8px;
}

.masthead-uploader-container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
    position: relative;

    border-radius: 5px;
    background-color: transparent;
    color: black;
    background-image: linear-gradient(to right, #000000 60%, transparent 50%), linear-gradient(to right, #000000 60%, transparent 60%), linear-gradient(to bottom, #000000 60%, transparent 60%), linear-gradient(to bottom, #000000 60%, transparent 60%);
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
}

.masthead-uploader-container .action-camera-panel{
    padding: 120px 0;
}

.masthead-uploader-container .action-camera-panel i{
    font-size: 40px;
}

.offcanvas--body--image-retake-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0;

    width: 24px;
    height: 24px;
    background: #FFD200;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

#retakePhotoInput {
    display: none;
}

.offcanvas--body--image-retake-instruction-style {
    font-family: DM Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: left;
    color: #75716B;
    margin-bottom: 24px;
}

.makeover-info-container{
    display: flex;
}

.makeover-info-container hr{
    height: 300px;
    border: 1px solid;
    border-style: solid;
    color: #E5E5E1;
    margin: 0 24px;
}

.makeover-info-container .uploader-panel{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 25px;

    border: 1px dashed #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.gallery-container .gallery-tab-panel{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 6px;
    background: #F5F5F5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.gallery-container .gallery-tab-panel > .nav-tabs.nav-justified > li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;

    border-bottom: unset;
}

.gallery-container .gallery-tab-panel > .nav-tabs.nav-justified > .active{
    background: #FFFFFF;
    border: 1px solid #E6E5E1;
    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);

    border-bottom: unset;
}

.gallery-container .gallery-tab-panel > .nav-tabs > li.active > a{
    font-weight: 700;
    color: #EFAC00;
}

.dropbox-input{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 100%;
}

.search-support-input{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;

    min-width: 450px;

    background: #FFFFFF;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.makeover-update-input{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 100%;
}

.search-support-input::-webkit-input-placeholder,
.search-support-input:-ms-input-placeholder,
.search-support-input::placeholder{
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #75716B;
}

.vertical-line{
    border-bottom: 1px solid #E6E5E1;
    margin: 24px 0px;
    width: 100%;
}

.widget--button{
    display: inline-flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    width: 210px;
    background: #FFD200 !important;
    border-radius: 30px;
}

.widget--button.delete:focus,
.widget--button.delete:hover,
.widget--button.delete{
    background: #EE4056 !important;
    color: #FFFFFF !important;
}

.widget--button.delete i{
    font-size: 20px;
}

.fillbox-panel{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;

    max-width: 450px;
    background: #F5F5F5;

    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.fillbox-panel i{
    color: #000000;
    font-size: 20px;
}

.media-uploader-container{
    display: flex;
    flex-wrap: wrap;
}

.media-uploader-container .media-uploader-wrapper{
    width: 60px;
    height: 60px;

    margin-right: 16px;
    margin-bottom: 16px;
}

.media-uploader-container .media-uploader-wrapper:first-child{
    margin-right: 8px;
}

.media-uploader-container .media-uploader-wrapper .media-uploaded--item{
    position: relative;
}

.media-uploaded--item .media-uploaded{
    cursor: pointer;
    display: block;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0px 7px 27px rgb(75 54 0 / 5%), 0px 2.92443px 11.28px rgb(75 54 0 / 4%), 0px 1.56354px 6.0308px rgb(75 54 0 / 3%), 0px 0.876509px 3.38082px rgb(48 34 0 / 3%), 0px 0.465507px 1.79553px rgb(75 54 0 / 2%), 0px 0.193708px 0.747159px rgb(75 54 0 / 1%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    margin-bottom: 8px;
}

.add-media--thumbnail{
    border: 2px dashed #C0BFBB;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    height: 60px;
    width: 60px;
}
.add-media--thumbnail label{
  cursor: pointer;
  font-size: 26px;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  top: 0;
}
.add-media--thumbnail i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #75716B;
}

.edit-makeover-update--form .feed-media-container .feed-media-wrapper .social-media--item{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 28px 8px 16px;
    gap: 8px;
    border: 1px solid #383633;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

.edit-makeover-update--form .timeline-media-details i{
    font-size: 20px;
    color: #EFAC00;
}

.edit-makeover-update--form .social-media--item.document .text-wrapper{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #383633;
}

@media (min-width: 576px) {
    .row.flex-grid .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-sm-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-sm-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .row-cols-sm-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .row-cols-sm-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .row-cols-sm-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row.flex-grid .row-cols-sm-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .row.flex-grid .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .row.flex-grid .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .row.flex-grid .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .row.flex-grid .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .row.flex-grid .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .row.flex-grid .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .row.flex-grid .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .row.flex-grid .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .offset-sm-0 {
        margin-left: 0;
    }
    .row.flex-grid .offset-sm-1 {
        margin-left: 8.333333%;
    }
    .row.flex-grid .offset-sm-2 {
        margin-left: 16.666667%;
    }
    .row.flex-grid .offset-sm-3 {
        margin-left: 25%;
    }
    .row.flex-grid .offset-sm-4 {
        margin-left: 33.333333%;
    }
    .row.flex-grid .offset-sm-5 {
        margin-left: 41.666667%;
    }
    .row.flex-grid .offset-sm-6 {
        margin-left: 50%;
    }
    .row.flex-grid .offset-sm-7 {
        margin-left: 58.333333%;
    }
    .row.flex-grid .offset-sm-8 {
        margin-left: 66.666667%;
    }
    .row.flex-grid .offset-sm-9 {
        margin-left: 75%;
    }
    .row.flex-grid .offset-sm-10 {
        margin-left: 83.333333%;
    }
    .row.flex-grid .offset-sm-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 768px) {
    .row.flex-grid .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-md-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-md-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .row-cols-md-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .row-cols-md-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .row-cols-md-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row.flex-grid .row-cols-md-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .row.flex-grid .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .row.flex-grid .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .row.flex-grid .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .row.flex-grid .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .row.flex-grid .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .row.flex-grid .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .row.flex-grid .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .row.flex-grid .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .offset-md-0 {
        margin-left: 0;
    }
    .row.flex-grid .offset-md-1 {
        margin-left: 8.333333%;
    }
    .row.flex-grid .offset-md-2 {
        margin-left: 16.666667%;
    }
    .row.flex-grid .offset-md-3 {
        margin-left: 25%;
    }
    .row.flex-grid .offset-md-4 {
        margin-left: 33.333333%;
    }
    .row.flex-grid .offset-md-5 {
        margin-left: 41.666667%;
    }
    .row.flex-grid .offset-md-6 {
        margin-left: 50%;
    }
    .row.flex-grid .offset-md-7 {
        margin-left: 58.333333%;
    }
    .row.flex-grid .offset-md-8 {
        margin-left: 66.666667%;
    }
    .row.flex-grid .offset-md-9 {
        margin-left: 75%;
    }
    .row.flex-grid .offset-md-10 {
        margin-left: 83.333333%;
    }
    .row.flex-grid .offset-md-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 992px) {
    .row.flex-grid .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-lg-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-lg-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .row-cols-lg-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .row-cols-lg-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .row-cols-lg-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row.flex-grid .row-cols-lg-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .row.flex-grid .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .row.flex-grid .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .row.flex-grid .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .row.flex-grid .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .row.flex-grid .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .row.flex-grid .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .row.flex-grid .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .row.flex-grid .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .offset-lg-0 {
        margin-left: 0;
    }
    .row.flex-grid .offset-lg-1 {
        margin-left: 8.333333%;
    }
    .row.flex-grid .offset-lg-2 {
        margin-left: 16.666667%;
    }
    .row.flex-grid .offset-lg-3 {
        margin-left: 25%;
    }
    .row.flex-grid .offset-lg-4 {
        margin-left: 33.333333%;
    }
    .row.flex-grid .offset-lg-5 {
        margin-left: 41.666667%;
    }
    .row.flex-grid .offset-lg-6 {
        margin-left: 50%;
    }
    .row.flex-grid .offset-lg-7 {
        margin-left: 58.333333%;
    }
    .row.flex-grid .offset-lg-8 {
        margin-left: 66.666667%;
    }
    .row.flex-grid .offset-lg-9 {
        margin-left: 75%;
    }
    .row.flex-grid .offset-lg-10 {
        margin-left: 83.333333%;
    }
    .row.flex-grid .offset-lg-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 1200px) {
    .row.flex-grid .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-xl-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .row-cols-xl-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .row-cols-xl-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .row-cols-xl-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .row-cols-xl-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .row.flex-grid .row-cols-xl-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-xl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .row.flex-grid .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .row.flex-grid .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .row.flex-grid .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.flex-grid .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .row.flex-grid .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .row.flex-grid .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .row.flex-grid .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .row.flex-grid .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .row.flex-grid .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .row.flex-grid .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .row.flex-grid .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .row.flex-grid .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.flex-grid .offset-xl-0 {
        margin-left: 0;
    }
    .row.flex-grid .offset-xl-1 {
        margin-left: 8.333333%;
    }
    .row.flex-grid .offset-xl-2 {
        margin-left: 16.666667%;
    }
    .row.flex-grid .offset-xl-3 {
        margin-left: 25%;
    }
    .row.flex-grid .offset-xl-4 {
        margin-left: 33.333333%;
    }
    .row.flex-grid .offset-xl-5 {
        margin-left: 41.666667%;
    }
    .row.flex-grid .offset-xl-6 {
        margin-left: 50%;
    }
    .row.flex-grid .offset-xl-7 {
        margin-left: 58.333333%;
    }
    .row.flex-grid .offset-xl-8 {
        margin-left: 66.666667%;
    }
    .row.flex-grid .offset-xl-9 {
        margin-left: 75%;
    }
    .row.flex-grid .offset-xl-10 {
        margin-left: 83.333333%;
    }
    .row.flex-grid .offset-xl-11 {
        margin-left: 91.666667%;
    }
}

.paging_simple_numbers select {
    margin: 0 20px;
}

.paging_simple_numbers select:focus {
    outline: none
}

.hide {
    display: none
}

.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: 23px;
    color: #fff;
    font-size: 20px;
    z-index: 5;
    cursor: pointer;
}

.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: #fff;
    text-decoration: none
}

.img-table.document .remove-img--btn {
    top: 4px;
    right: -10px;
}

.img-table {
    display: table;
    width: 100%;
    position: relative;
}

.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;
}

.reply-task--panel .img-table-cell,
#offcanvas-post .img-table-cell {
    height: 50px;
}

.reply-task--panel .img-table-cell.document,
#offcanvas-post .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 #FFFFFF;
    box-sizing: border-box;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;

    background: transparent;
    height: 32px;
    width: 100%;
    /*cursor: pointer;*/
}

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

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

.offcanvas .img-table-cell.document,
.widget--item .img-table-cell.document{
    max-width: 280px;
    /*comment by zawa*/
    /*Off : to prevent close button get cropped*/
    /*overflow: hidden;*/
}

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

.add-edit-quotation-variant--form .img-table-cell.document{
  max-width: 90%;
}

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

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

.makeover-info-container .img-table-cell.document .icon-wrapper{
    color: #EFAC00;
}

.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: #FFFFFF;
}

.makeover-info-container .img-table-cell.document .icon-wrapper,
.edit-push-client--form .img-table-cell.document .icon-wrapper,
.edit-push-client-step2--form .img-table-cell.document .icon-wrapper,
.white-card .img-table-cell.document .icon-wrapper,
.gray-card .img-table-cell.document .icon-wrapper,
.edit-completed-task--form .img-table-cell.document .icon-wrapper,
.add-edit-quotation-variant--form .img-table-cell.document .icon-wrapper{
    color: #EFAC00;
}

.makeover-info-container .img-table-cell.document .icon-wrapper i,
.edit-push-client--form .img-table-cell.document .icon-wrapper i,
.edit-push-client-step2--form .img-table-cell.document .icon-wrapper i,
.white-card .img-table-cell.document .icon-wrapper i,
.gray-card .img-table-cell.document .icon-wrapper i,
.edit-completed-task--form .img-table-cell.document .icon-wrapper i,
.add-edit-quotation-variant--form .img-table-cell.document .icon-wrapper i{
    font-size: 18px;
}

.makeover-info-container .img-table-cell.document,
.edit-push-client--form .img-table-cell.document,
.edit-push-client-step2--form .img-table-cell.document,
.white-card .img-table-cell.document,
.gray-card .img-table-cell.document,
.edit-completed-task--form .img-table-cell.document,
.add-edit-quotation-variant--form .img-table-cell.document{
    border: 1px solid #383633;
    height: 100%;
    margin-bottom: 8px;
}

.makeover-info-container .img-table-cell.document:last-child:last-child,
.edit-push-client--form .img-table-cell.document:last-child:last-child,
.edit-push-client-step2--form .img-table-cell.document:last-child:last-child,
.white-card .img-table-cell.document:last-child,
.gray-card .img-table-cell.document:last-child,
.edit-completed-task--form .img-table-cell.document:last-child{
    margin-bottom: 24px;
}

.edit-completed-task--form .img-table-cell.document,
.edit-push-client--form .img-table-cell.document,
.edit-push-client-step2--form  .img-table-cell.document{
    cursor: pointer;
}

.edit-completed-task--form .img-table-cell.document.active,
.edit-push-client--form .img-table-cell.document.active,
.edit-push-client-step2--form .img-table-cell.document.active{
    border: 1px solid #EFAC00;
}

.edit-completed-task--form .img-table-cell.document .input-container,
.edit-push-client--form .img-table-cell.document .input-container,
.edit-push-client-step2--form .img-table-cell.document .input-container{
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translate(50%,-50%);
}

.edit-completed-task--form .img-table-cell.document .input-container .radiomark,
.edit-push-client--form .img-table-cell.document .input-container .radiomark,
.edit-push-client-step2--form .img-table-cell.document .input-container .radiomark{
    top: 50%;
    right: 0%;
    transform: translate(50%,-50%);
    border: 2px solid #C0BFBB;
    background: white;
}

.add-edit-quotation-variant--form .img-table-cell.document .input-container{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(50%,-50%);
}
.add-edit-quotation-variant--form .img-table-cell.document .input-container .radiomark{
    top: 50%;
    right: 0%;
    transform: translate(50%,-50%);
}

.edit-push-client--form .img-table-cell.document .text-wrapper,
.edit-push-client-step2--form .img-table-cell.document .text-wrapper,
.white-card .img-table-cell.document .text-wrapper,
.gray-card .img-table-cell.document .text-wrapper,
.edit-completed-task--form .img-table-cell.document .text-wrapper,
.add-edit-quotation-variant--form .img-table-cell.document .text-wrapper{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #383633;
    text-align: left;
    word-break: break-all;
}

/*.add-client-update--form .img-table-cell.document{
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    width: 50%;
}*/

.edit-push-client--form .img-table.document .remove-img--btn,
.edit-push-client-step2--form .img-table.document .remove-img--btn,
.white-card .img-table.document .remove-img--btn,
.gray-card .img-table.document .remove-img--btn,
.edit-completed-task--form .img-table.document .remove-img--btn{
    top: 50%;
    right: 0%;
    transform: translate(50%,-50%);
}

.edit-push-client--form .remove-img--btn .md-close,
.edit-push-client-step2--form .remove-img--btn .md-close,
.white-card .remove-img--btn .md-close,
.gray-card .remove-img--btn .md-close,
.edit-completed-task--form .remove-img--btn .md-close,
.add-edit-quotation-variant--form .remove-img--btn .md-close{
    margin-left: 1px;
}

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

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

.button {
    display: inline-block;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.button:hover {
    background: #ddd;
}

.btn-primary {
    background: #FFD200;
    border-radius: 20px;
    line-height: 36px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 15px;
    text-transform: none;
    border: none;
    color: #000;
}

.btn-primary:hover {
    color: #000;
}

.black--btn{
    background: #000 !important;
    color: #fff !important;
}

.btn-empty[disabled]{
  opacity: 0.3;
}


#clientFileElem,
.clientFileElem,
#fileElem,
.fileElem,
#fileElem2,
.fileElemForOwner,
.fileElemCost,
.fileElemWithoutOnchangeUpload {
    /*display: none !important;*/
    pointer-events: none;
    opacity: 0.1;
    position: absolute;
    top: 0;
    height: 0.3px;
}

.warranty-upload--box {
    border: 2px dashed #ccc;
    border-radius: 20px;
    font-family: 'DM Sans', sans-serif;
    padding: 20px;
    text-align: center;
    /*height: 200px;*/
}

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

.feed-replies-profile--listing:after {
    content: '';
    display: block;
    clear: both;
}

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

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

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

.divider-section {
    padding: 0 15px;
    margin: 0px;
}

.main-post--panel .main-post-description {
    margin: 0;
    margin-bottom: 8px;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 23px;
    color: #000000;
}

.main-post--panel .main-post-description>p {
    margin: 0;
}

.main-post--panel .momentOfDate {
    text-align: right;
}

.workplace-upload--btn {
    display: block;
    color: rgba(158, 158, 158, 1);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    padding-left: 20px;
    cursor: pointer;
}

.workplace-upload--btn i {
    position: absolute;
    left: 5px;
    font-size: 20px;
    top: 50%;
    margin-top: -10px;
}


/*workplace modal*/

.mini-theatre .owl-carousel.owl-drag .owl-item:hover {
    cursor: pointer;
}

.mini-theatre .owl-carousel.owl-drag .owl-item.selected {
    border: 2px solid #000;
}

.mini-theatre .owl-carousel.owl-drag .owl-item {
    overflow: hidden;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

#workplace-media--modal .theatre {
    padding: 0 20px;
}

#workplace-media--modal .theatre .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: calc(100% + 40px);
    /*height:  40px;*/
    margin-top: -20px;
    /*pointer-events: none;*/
    left: -20px;
}

#workplace-media--modal .theatre .owl-carousel .owl-nav button {
    position: absolute;
    right: 0;
    font-size: 30px;
    line-height: 40px;
}

#workplace-media--modal .theatre .owl-carousel .owl-nav button,
#workplace-media--modal .theatre .owl-carousel .owl-nav button span:hover {
    text-decoration: none !important;
}

#workplace-media--modal .theatre .owl-carousel .owl-nav button.disabled {
    opacity: 0.3;
}

#workplace-media--modal .theatre .owl-carousel .owl-nav button:first-child {
    position: absolute;
    right: auto;
    left: 0;
}

#workplace-media--modal .theatre .owl-carousel .owl-item {
    height: 350px;
}

#workplace-media--modal .theatre .owl-carousel .owl-item .item {
    display: flex;
    align-items: center;
    text-align: center;
    height: 100%;
}

#workplace-media--modal .theatre .owl-carousel .owl-item img {
    max-height: 350px;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}

#workplace-media--modal .theatre-desc>p {
    display: inline;
}

.theatre-desc {
    font-size: 17px;
    line-height: 23px;
}


/*social media ends*/

@media (max-width: 1050px) {
    .modal-dialog.m {
        min-width: auto;
        width: auto;
    }
    .modal-dialog.xl {
        min-width: auto;
        width: auto;
    }
}

@media only screen and (min-width: 768px) {
    .table-filter {
        padding: 0;
    }
    .sticky-col {
        position: sticky;
        position: -webkit-sticky;
        background-color: #fff;
    }
    .second-col {
        /*box-shadow: 2px 0px 3px rgba(0,0,0,0.25);*/
    }
    .shadowborder {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
        z-index: 10;
        background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
        width: 5px
    }
    .table-filter .nav {
        display: block
    }
    .table-filter select {
        display: none;
    }
    /*social media starts*/
    .gantt-page .social-media--item {
        height: 100px;
    }
    .social-media--item {
        /*height: 56px;*/
        /*width: 56px;*/
        height: 96px;
    }
    .widget--item .social-media--item{
        height: 56px;
    }
    .widget--item .social-media--item.document{
        /*height: 32px;*/
        height: 100%;
    }
    .widget--item .feed-media-container.document .feed-media-wrapper{
        flex: unset;
        padding: 0;
    }
    .sm-download--caption {
        height: 20px;
        padding: 0px 0 0 0;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        width: 100%
    }
    .doc-icon {
        width: 100px;
        margin: 20px auto 0 auto
    }

    .feed-media-container .feed-media-wrapper .social-media--item{
        /*height: 100%;*/
        width: 100%;
        border: 1px solid #C0BFBB;
        box-sizing: border-box;
    }

    .updates-done--panel.flag--item .upload--listing .col-xs-12 .taskimage-uploaded--item,
    .updates-done--panel.flag--item .feed-media-container .feed-media-wrapper .social-media--item:not(.document){
        border: none;
    }

    .reply-task--panel .social-media--item.document{
        width: 90%;
    }

    .own-bubble .feed-media-container .feed-media-wrapper .social-media--item{
        border: 1px solid #000000;
    }
    /*social media ends*/
}

.updates-done--panel .feed-media-container.document .social-media--item{
    border: 1px solid #FFFFFF;
}

.feeds--item.task--item .feed-media-container.document .social-media--item,
.reply-task--panel .pma-timeline .updates-done--panel .feed-media-container.document .social-media--item{
    border: 1px solid #000000;
}

/*popup*/

.main-quotation-item--table,
.main-quotation-item--table td {
    font-size: 12px;
    line-height: 14px !important
}

.main-quotation-item--table td .pricing-qty--panel {
    position: relative;
    background: rgba(0, 0, 0, 0.04);
    display: inline-block;
    padding: 2px 30px 2px 0;
    /*color: #E5E5E5*/
}

.main-quotation-item--table td .pricing-qty--panel span {
    position: absolute;
    right: 2px;
    top: 3px;
    font-size: 10px;
    width: 30px;
    text-align: left;
    color: rgba(0, 0, 0, 0.4);
}

.main-quotation-item--table td .pricingQty:focus,
.main-quotation-item--table td .pricingQty:active {
    outline: none
}

.main-quotation-item--table td .pricingQty {
    width: 50px;
    border: none;
    background: none;
    text-align: right
}

.inline-show {
    display: inline;
}

.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
}

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

.workplace-sticky--a-tag--flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.workplace-sticky--a-tag--badge-custom-styling {
    position: absolute;
    width: 32px;
    text-align: center;
    right: 10px;
    background-color: #f44336;
    border-color: #f44336;
    font-weight: bold;
    color: #ffffff;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
}





.has-error .filter-switch{
    border: 1px solid #f44336;
}

.has-error .filter-switch .filter-switch-item label{
    color: #000;
}
.filter-switch{
    background: #F5F5F5;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding:  2.5px;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    border-radius: 6px !important;
}

.filter-range-date{
  margin-left:40px;
  width:calc(100% - 40px);
  padding-top:10px;
}

.filter-range-date .filter-range-date--input{
  width:45%;
  display:inline-block;
  vertical-align:middle;
}


.filter-range-date .filter-range-date--input input.has-error{
  border:1px solid red;
  border-radius: 6px;
}


a.clear-filter-date--btn{
  position:absolute;
  width:20px;
  right: 18px;
  top: 3px;
}

.filter-range-date .filter-range-date--arrow{
  width:5%;
  margin:0 1.5%;
  display:inline-block;
  vertical-align:middle;
  text-align: center;
}


.filter-range-date .filter-range-date--arrow img{
  width:100%;
  display:block;
}

.general-loading-screen-mid--container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:100;
}

.general-loading-lottie--content{
  margin:0 auto;
}

.reports-module--form .reports-card{
  padding:24px;
  min-width:460px;
  max-width:500px;
}

.reports-module--form .filter-range-date{
  margin-left:0;
  width:100%;
}

.reports-module--form .filter-range-date p{
  color:#75716B;
  font-family: DM Sans;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.reports-module--form .cta-container{
  padding:24px 0 0;
}

.reports-module--form .reports-form--filter-btn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    background: #FFD200;
    -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: 16px;
    line-height: 24px;
    color: #000000;
    text-decoration: none !important;
}


/*.filter-switch-item{
    display: flex;

}*/

.nav-fill .nav-item, .nav-fill>.nav-link{
    flex: 1 1 auto;
}



.filter-switch-item{
    
    
    margin: 0 2.5px;
    text-align: center;
    border-left:  1px solid #E6E5E1;
}

.filter-switch-item.first-child,.filter-switch-item:first-child,
.filter-switch-item.active,.filter-switch-item.active ~ .filter-switch-item.nearby{
    border-left:  none
}

.filter-switch-item label{
    margin: 0;
    display: block;

    
    cursor: pointer;
    line-height: 30px;
    font-weight: 700;
}

.filter-switch-item input:checked + label {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  color: #FFD200;
  background: #fff;
  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);
}


.filter-switch-item:first-child input:not(:checked) + label{
    border-left: none;
}
.filter-switch-item input:not(:checked) + label {
  background: none;
  
}
.filter-switch-item input:not(:checked) + label:hover{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    /*background: green !important;*/
}


.dropdown-alternative--panel{
    border: 1px solid #C0BFBB; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; height: 37px;
    padding: 5px 5px 0 5px;
    position: relative;
}

.dropdown-alternative--panel span{
    
    display: block;
    margin: 0 0 0;
    padding: 0 15px 0 5px;
    
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis

}

.dropdown-alternative-remove--btn,.dropdown-alternative-remove--btn:hover{
    display: block;
    position: absolute;
    right: 10px;
    top: 7px;
    text-decoration: none;
}

.ui-widget-content{
    -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
    border: 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);

}

.ui-menu-item{
    box-shadow: none;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #E6E5E1;
}
.ui-menu-item.ui-state-focus{
    margin: 0;
    /*border: none !important;
    border-bottom: 1px solid #E6E5E1;*/
    
}

.ui-menu-item .add-new--item{
    border-bottom: 1px solid #E6E5E1;
    padding: 10px 10px 10px 35px;
    font-style: italic;
    opacity: relative;
    font-size: 14px;
    color: #75716B;
}
.ui-menu-item .add-new--item.disabled{
  background: #CECECE;
}

.ui-menu-item .add-new--item i{
    position: absolute;
    left: 10px;
    display: block;
    top: 0;
    padding-top: 16px;
    color: #75716B;
    
    height: 100%;
}

.ui-menu-item{
    border-bottom: 1px solid #E6E5E1;
}

.ui-menu-item2 {
    padding: 20px 10px;
}
.ui-menu-item2 div{
    line-height: 16px;
}

.text-medium, strong{
    font-weight: 700;
}

/*.add-project--steps:first-child,*/
.add-project--steps:nth-child(1){
    display: block;
}
.add-project--steps{
    display: none;
}

.btn-empty,.btn-empty:hover,.btn-empty:active{
    display: inline-block;
    text-align: center;
    border:  1px solid #000;
    color: #000;
    min-width: 120px;
    background: none;
    /*line-height: 46px;*/
    line-height: 34px;
    font-size: 15px;
    padding: 0 20px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    text-transform: none;
    text-decoration: none !important;
    color: #000;
}

.btn-empty2,.btn-empty2:hover,.btn-empty2:active{
    display: inline-block;
    text-align: center;
    border:  1px solid #000;
    color: #000;
    min-width: 120px;
    background: none;
    line-height: 46px;
    
    font-size: 15px;
    padding: 0 20px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    text-transform: none;
    text-decoration: none !important;
    color: #000;
}

.notification .warning-panel{
    border:  1px solid #EFAC00;
    background: #FFFAE9;
    padding: 5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 10px 0;
    position: relative;
}

.notification .warning-panel.with-links{
    padding-right:  150px;
}

.notification .warning-panel .cross-sell--link{
    position: absolute; right:20px; top: 50%; margin-top: -12px;
    font-weight: bold;
    padding-right: 10px;
    display: inline-block;
}

.notification .warning-panel .cross-sell--link i{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    top:  5px;
    right: -10px;
}

.notification .danger-panel{
    border:  1px solid #EE4056;
    background: #FFF4F4;
    padding: 5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 10px 0;
}
.loading-transition--panel{
    text-align: left;
    display: none;
}
.loading-transition--panel img{
    display: block;
    width: 30px;
    margin-top: 10px;
}

.ui-autocomplete-loading{ 
    background: url('../images/load.gif') no-repeat right center 
}

.loading-transition-container{
    position: relative;
}
.loading-transition-container input{
    box-sizing: border-box;
}
.loading-transition-container .loading-transition-wrapper{
    position: absolute;
    right: 10px;
    top: 8px;
    display: none;
}
.loading-transition-container .loading-transition-wrapper img{
    position: relative; 
    height: 20px; 
    width: 20px; 
    display: inline-block;
}
.loading-transition-container .loading-transition-wrapper.showBlock{
    display: block;
}

.add-owner--panel{
    position: relative;  background: #E5E5E5; padding: 20px 40px 0 100px; border: 1px solid #C0BFBB; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
}
.add-owner--panel .cancel-new-owner--btn{
    position: absolute;
    right: -25px;
}

.teamMember--listing{
    list-style: none;
    margin: 0 0 60px 0;
}
.teamMember--listing li{
    padding: 5px 0;
}

.teamMember-item{
    display: table
}
.teamMember-item .trigger-contact-btn{
    font-size: 16px;
}
.teamMember-item .trigger-contact-btn span{
    display: block;
    font-size: 12px;
    color: #75716B;
}
.teamMember-item .trigger-contact-btn,.teamMember-item .trigger-contact-btn:hover{
    text-decoration: none;
}
.project-approval--listing{
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-approval--listing li{
    position: relative;
    padding-left: 20px;
    line-height: 14px;
    margin-bottom: 5px;
}

.project-approval--listing li span.icon-group.icon-circle{
    position: absolute;
    left: 0;
    top: 1px;
    margin-top: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #EFAC00;
    text-align: center;
    display: inline-block;
}

.project-approval--listing li span.icon-group.icon-circle i{
    position: absolute;
    left: 2px;
    top: 0;
    font-size: 8px;
    border-radius: 50px;
    line-height: 12px;
    margin-top: 0;

}
.project-approval--listing li span.icon-group.icon-circle.rejected,.project-approval--listing li span.icon-group.icon-circle.rejected i{
    border-color: red;
    color: red;
}

.project-approval--listing li span.icon-group.approved,.project-approval--listing li span.icon-group.approved i{
    color: #00B485;

}

.project-approval--listing li span.icon-group i{
    color:  #EFAC00;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -5px;
    font-size: 14px;
    border-radius: 50px;
    line-height: 12px;

}

.prompt-modal .btn{
    width:  45%;
}

.mark-as-complete--btn {
  margin-top: 40px;
  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;
  *cursor: hand;
  
  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,
.view-order-list--btn{
    margin-top: 40px;
    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;
}

.raise-invoice--btn{
  margin-top: 40px;
  display: inline-block;
  line-height: 40px;
  position: relative;
  margin-right: 3px;
  outline: none;
  cursor: pointer;
  
  white-space: nowrap;
  padding: 0px 40px;
  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;
}

.raise-invoice--btn:active{
  font-size:14px;
}

.add-project--thumbnail{
  /*height: 220px;*/ 
  padding-top: 40%;
  /*border: 1.5px dashed #C0BFBB; */
  /*.75em solid*/
  border: 2px dashed #C0BFBB; 
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  height: 88px;
  width: 82px;
}
.add-project--thumbnail label{
  cursor: pointer;
  /*top: 50%;
  left: 50%;*/
  font-size: 26px;
  /*margin: -15px 0 0 -15px;*/
  display: block;/*
  background: green;*/
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  top: 0;
}
.add-project--thumbnail i{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  margin: -15px 0 0 -15px;
  color: #75716B;
}


.upload-parent span{
    position: absolute;
    width: 100%;
    height:  100%;
    top: 0;
    left: 0;
}


.owner--thumbnail.upload-parent span:not(.progress){
    border-radius: 100%;
}
.owner--thumbnail.uploaded span:not(.progress){
    border-radius: 100%;   
    border: 1px solid black;
}

.owner--thumbnail.uploaded{
    border: none;
    position: static;
}
.owner--thumbnail.uploaded label{
  /*width: 50px;
  height: 50px;*/
  width: 36px;
  height: 36px;
  position: absolute;
  top: 0;
  background-color: #383633;
  right: 0;
  color: #75716B;
  border: 1px solid #75716B;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  top: auto;
  bottom: -10px;
  right: -10px;
  text-align: center;
}

.owner--thumbnail.uploaded label i{
  font-size: 20px;
  font-size: 20px;
  margin: -10px 0 0 -10px;
  color: #FFD200;
}






.owner--thumbnail{
  /*height: 220px;*/ 
  padding-top: 40%;
  /*border: 1.5px dashed #C0BFBB; */
  /*.75em solid*/
  border: 2px dashed #C0BFBB; 
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  height: 88px;
  width: 88px;
}
.owner--thumbnail label{
  cursor: pointer;
  /*top: 50%;
  left: 50%;*/
  font-size: 26px;
  /*margin: -15px 0 0 -15px;*/
  display: block;/*
  background: green;*/
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  top: 0;
}
.owner--thumbnail i{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  margin: -15px 0 0 -15px;
  color: #75716B;
}



.uploading-panel{
  background: #fff;
  -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;
}



/*uploaded photo for task*/
.upload--listing{
  margin-top: 10px;
}
/*lilsizzo*/
.upload--listing .col-xs-12 .taskimage-uploaded--item{
    border: 1px solid #C0BFBB;
    position: relative;
    -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;
    overflow: hidden;
}
.upload--listing .col-xs-6:first-child .taskimage-uploaded--item{
    border: 1px solid #C0BFBB;
    position: relative;
    -webkit-border-top-left-radius: 12px;
    -moz-border-radius-topleft: 12px;
    border-top-left-radius: 12px;
    overflow: hidden;
}

.upload--listing .col-xs-6:nth-child(2) .taskimage-uploaded--item:first-child{
    border: 1px solid #C0BFBB;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topright: 12px;
    border-top-right-radius: 12px;
    position: relative;
    overflow: hidden;
}
.upload--listing .col-xs-6:nth-child(2) .taskimage-uploaded--item{
    border: 1px solid #C0BFBB;
}

.upload--listing .col-xs-6:nth-child(2) .taskimage-uploaded--item.no-border,
.upload--listing .col-xs-6:nth-child(2) .taskimage-uploaded--item.no-border:first-child,
.upload--listing .col-xs-6:first-child .taskimage-uploaded--item.no-border{
    border: none;
}

.taskimage-uploaded{
  display: block;
  overflow: hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  width: 100%;
  padding-top: 100%;
  position: relative;
  border: 3px solid #fff;
  margin-bottom: 8px;
  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.video:not(.taskimage--overlay){
    position: relative;
}


.taskimage-uploaded.video i,
.taskimage-uploaded--item .video i{
    position: absolute;
    top: 50%;
    display: inline-width;
    width: 50px;
    height: 50px;
    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: 50px;
    margin: -25px 0 0 -25px;
    font-size: 30px;
}

.view-push-client--form .taskimage-uploaded.video i,
.edit-push-client--panel .taskimage-uploaded.video i,
.edit-completed-task--panel .taskimage-uploaded.video i,
#offcanvas-mark-complete .taskimage-uploaded.video i,
.project-cost-images--container .taskimage-uploaded.video i,
.task-drawer-taskupdate--panel .taskimage-uploaded.video i,
.modal-scrolling-content .upload--listing .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;
}
.mark-complete--form .white-card{
  overflow: hidden;
  width: 100%;
}
.mark-complete--form-success{
  position: absolute;
  width: 100%;
  background: #ffffff;
  height: 100%;
  top: 0;
  left: 0;
  z-index:1001;

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

.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;
}

/* The animation code */
@keyframes iconAppearScale {
  0%,20%{
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    transform:scale(0);
  }
  60%{
    -webkit-transform:scale(1.15);
    -moz-transform:scale(1.15);
    transform:scale(1.15);
  }
  65%{
    -webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    transform:scale(0.95);
  }
  70%{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    transform:scale(1);
  }
}

.taskimage--overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    padding-top: 25px;
    cursor: pointer;
}
.remove-image--btn,.remove-image--btn:focus,.remove-image--btn:hover{
  color: #000;
}
.remove-image--btn i{
  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;
}


.taskimage-wrapper .inline-popup i{
  font-size: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  color:  #000;
}
.taskimage-wrapper{
  padding: 0;
  padding-right: 8px;
    position: relative;
}

#addClientUpdateModal .taskimage-wrapper .inline-popup i{
  font-size: 30px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#addClientUpdateModal .taskimage-uploaded.video i, 
#addClientUpdateModal .taskimage-uploaded--item .video i{
  width: 40px;
  height: 40px;
  line-height: 40px;
}

/*task done*/
.updates-done--panel .upload--listing{
    margin-top: 0 !important;
}
.updates-done--panel{
    position: relative;
    
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.upload--listing .row.s-gutters{
    margin: 0 -2px;
}
.updates-done--panel .taskimage-uploaded--item{
    margin:  0 0 5px 0;
}
.taskimage-uploaded--item{
  position: relative;
}

.taskimage-uploaded--item video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.row.s-gutters{
    margin: 0 -5px;
}

.row.s-gutters [class^=col] {
    padding: 0 2.5px;
}

.taskimage--text-overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.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);
}

.updates-done--panel .taskimage-uploaded{
    border-radius: 0;
    margin-bottom: 0;
    border: 0;
}

.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;
}
.taskpdf--listing{
    margin:  20px 0 !important;
    list-style: none;
    padding-left: 0;
}

.taskpdf--listing li{
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.taskpdf-uploaded{
    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;
}

.task-flag-panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.task-flag-panel .task-flag-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;

    min-width: 106px;

    background: #FCDEDF;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #EE4056;
}
.task-flag-panel i{
    color: #EE4056;
    font-size: 26px;
}

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

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

.task-statement-details{
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 8px;
    word-break: break-all;
}
.task-statement-details .highlight-text{
    color: #EFAC00;
}

.task-statement-remarks{
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #C0BFBB;
  background: #FFF;
}

.feeds--item.task--item .task-statement-details,
.reply-task--panel .pma-timeline .task-statement-details{
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #383633;
    margin-bottom: 8px;
    word-break: break-all;
}

.feeds--item.task--item .highlight-text,
.reply-task--panel .pma-timeline .task-statement-details .highlight-text{
    font-weight: 700;
    color: #383633;
}

.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-panel2{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 4px;
    background: none;
    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;
}


.flag--item .updates-done--panel,
.flag--item .task-remark-panel{
    margin-bottom: 0;
}

.flag--item .task-remark-panel{
    color: #EE4056;
}

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

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

.task-dropbox-panel{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 16px;
  border: 1px solid #C0BFBB;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;

  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}

.task-dropbox--panel2{
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 10px;
    word-break: break-all;
    line-height: 20px;
    margin-top: 40px;
}

.task-dropbox--panel2 a{
  color: #FFD200; 
  font-weight: 600;
}

.taskpdf-uploaded i{
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -7px;
    color: #FFD200;
    font-size: 18px;
}
.taskpdf--listing li{
    padding: 0;
    border-top: 0 !important;
}
.expand-pdf-list,.expand-pdf-list:hover{
    color: #FFD200;
    text-decoration: underline;
    font-weight:bold;
}

.updates-done--panel .taskimage-uploaded.active:after{
    background: none;
}


.updates-done--panel .form-group{
    margin: 0;
}

.updates-done--panel.flag--item{
    border: 1px solid #EE4056;
    box-sizing: border-box;
}

.updates-done--panel.hide-border{
  border: none;
  box-sizing: unset;
}

.view-task--form .task-complete i {
    font-size: 30px !important;
    color: #00B485 !important;
}

.view-task--form .task-flagged i{
    font-size: 26px !important;
    color: #EE4056 !important;
}

.mytooltip .mytooltiptext {
    display: inline-block;
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 3px;
    position: absolute;
    z-index: 100;
    bottom: 100%;
    /*left: 50%;*/
    margin-left: -40px;
    opacity: 0;
    transition: opacity 0.3s;
    /*white-space: nowrap;*/
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    overflow-wrap: break-word;
}

.mytooltip .mytooltiptext::after {
    /*content: "";*/
    /*position: absolute;*/
    /*top: 100%;*/
    /*left: 50%;*/
    /*margin-left: -5px;*/
    /*border-width: 5px;*/
    /*border-style: solid;*/
    /*border-color: #555 transparent transparent transparent;*/
}

.mytooltip:hover .mytooltiptext {
    visibility: visible;
    opacity: 1;
}

.push-client-warning {
    display: flex;
    align-content: space-between;
    margin-top: 20px;
}
.push-client-warning p{
    font-family: DM Sans;
    font-size: 14px !important;
    font-style: italic;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: 0em !important;
    text-align: left;
    color: #F16321;
    margin-bottom: 0 !important;
}
.push-client-warning i{
    font-size: 18px;
    color: #F16321;
    margin-right: 10px;
}

.updates-done--footer-panel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
}

.updates-done--link-out-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;

  border: 1px solid #FFFFFF;
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;

  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #FFFFFF;
}

.updates-done--link-out-btn i{
  font-size: 20px;
}



.successful-raise-invoice-panel p{
  line-height:30px;
}

/*push to app*/
.countdown-push-client-text-wrapper{
    flex: 1;
    padding: 15px 0 0 0

}

.countdown-push-client-text-wrapper label{
    margin-bottom: 0;
}
.countdown-push-client-card.offcanvas{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    cursor: default;
    margin-bottom: 20px;
}

.countdown-push-client-card.offcanvas .countdown-push-client-text-wrapper{
    flex: 1;
    padding: 0 0 0 15px
}

.countdown-push-client-card.offcanvas p{
     font-size: 18px;
 }

.countdown-push-client-card.offcanvas label{
    cursor: default;
}

.countdown-push-client-card.offcanvas .countdown-push-client-logo{
    left: 0;
    top: 20px;
    margin: 0;
}

.countdownUL{
  padding: 0;
  list-style-type: none;
  white-space:nowrap;
  margin: 0;
}

.countdownUL > li {
  display: inline-block;
  list-style-type: none;
  margin-right: 4px;
    padding-top: 5px;
    border-top: none !important;
    padding-bottom: 10px;
}

.countdownUL > li span {
  display: block;
  font-family: "DM Sans","Arial","Sans-serif";
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 25px;
  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;*/
}

.countdown-push-client-card.offcanvas .countdown-push-client-logo{
    left: 0;
    top: 20px;
    margin: 0;
}

.countdown-push-client-logo i{
    font-size: 20px;
    line-height: 50px;
}
.countdown-push-client-logo{
    text-decoration: none;
    background: #FFD200;
    position: relative;
    top: 5px;
    /*position: absolute;*/
    /*left: 15px;*/
    /*top: 15px;*/

    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;

}


/* card*/
.white-card{
  background: #fff;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  position: relative;
  padding: 24px;
  position: relative;
  margin-bottom: 16px;
}
.white-card.no-pad{
  padding: 0;
}
.white-card.border{
  border: 1px solid #C0BFBB;
}

.white-card .form-group label{
    color: #75716B;
    font-size: 16px;
}

.white-card .form-group label{

}
.white-card .form-control-static a,.white-card .form-control-static a:hover{
  text-decoration: none;
  color: #FFD200;
  font-weight: 700;
  white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */

}
.white-card.border .push-client{
    padding-right: 60px !important;
}

.gray-card{
  background: #F5F5F5;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  position: relative;
  padding: 24px;
  position: relative;
  margin-bottom: 20px;
}


/*buttons*/
.remove-item i {
  float: left;
  font-size: 15px;
  margin: 12px 10px 0 0;
  font-family: 'DM Sans', sans-serif;
}
.remove-item,.remove-item:hover,.remove-item:focus{
  background-color: #EE4056;
  line-height: 42px;
  font-size: 14px;
  display: inline-block;
  padding: 0 15px;
  -webkit-border-radius: 21px;
  -moz-border-radius: 21px;
  border-radius: 21px;
  color: #fff;
  text-decoration: none;
}

.edit-push-options--btn,.edit-push-options--btn:hover,.edit-push-options--btn:focus{
    text-decoration: none;
    background: #FFD200;
    position: absolute;
    right: 15px;
    top: 15px;

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

}
.edit-push-options2--btn,.edit-push-options2--btn:hover,.edit-push-options2--btn:focus,
.rounded-icon--btn,.rounded-icon--btn:hover,.rounded-icon--btn:focus{
    text-decoration: none;
    background: #FFD200;
    position: absolute;
    /*right: 15px;*/
    /*top: 15px;*/

    display: block;
    /*width: 50px;*/
    /*height: 50px;*/
    text-align: center;
    /*line-height: 50px;*/
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 2;
    color: #000;
    cursor: pointer;

    width: 38px;
    height: 38px;
    line-height: 40px;
    right: 24px;
    top: 24px;
}

.edit-push-options2--btn i,
.rounded-icon--btn i{
    font-weight: bold;
}

.edit-push-options--btn i{
    font-size: 20px;
    line-height: 50px;
}

.cancel-push-client-btn, .cancel-edit-push-client-btn, .cancel-pill-btn{
    min-width: 130px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    border: 1px solid #000000;
    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: 34px;
    text-align: center;
    color: #000000;
    text-decoration: none !important;

}
.cancel-auto-push-client-btn, .cancel-auto-push-client-btn:hover,.cancel-auto-push-client-btn:focus{
    min-width: 170px;
    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;

}
.push-client-update{
    margin-top: 15px;
    width: 100%;
}

.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;
}

.view-updates-client-btn, .view-updates-client-btn:hover,.view-updates-client-btn:focus{
    min-width: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    border: 1px solid #000000;
    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: 47px;
    text-align: center;
    color: #000000;
    text-decoration: none !important;
}
.archive-project--btn{
    line-height: 38px !important;
    border: 1px solid #000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    padding: 0;
    margin-top: 12px;
    color: #000 !important;
    font-weight: 700;
    min-width: 200px;
}









/*project dashboard*/
.recover-project--panel{
    background: #FFFAE9;
    border:  1px solid #EFAC00;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
    padding: 5px 200px 5px 10px;
    margin: 10px 0;
    position: relative;
}

.recover-project--panel a,.recover-project--panel a:hover,.recover-project--panel a:focus{
    position: absolute;
    right: 0;
    top: 0;
    color: #000;
    font-weight: 700;
}

/*autocomplete*/
.owner-autocomplete--dets{
    position: relative;
    padding-left: 20px;
    color: #75716B;
}

.owner-autocomplete--dets i{
    position: absolute;
    top: 2px;
    left: 0;
}

.owner-autocomplete--name{
    position: relative;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
    color: #000;
}


#delayListTasks .table-header{
    border-top: 1px solid #C0BFBB;
    border-bottom: 1px solid #C0BFBB;
}
#delayListTasks .table-body{
    border-bottom: 1px solid #C0BFBB;
}

#delayListTasks table tr th{
    background: #F5F5F5;
    padding:  10px 8px;
}
#delayListTasks table thead tr th{
    box-shadow: inset 0 10px 9px -7px rgb(79 57 0 / 25%);
}

#delayListTasks table tbody tr:last-child th{
    box-shadow: inset 0 -7px 9px -10px rgba(0,0,0,0.4);
}

#delayListTasks .table-body tbody tr th{
    border-bottom: 1px solid #C0BFBB;
}

#delayListTasks .table-body .parent-task-row th{
    background: #FFFFFF;
}

#delayListTasks .table-body .parent-task-row .task-name{
    font-weight: 700;
}

#delayListTasks .table-body .sub-task-row .task-name{
    font-weight: 400;
    font-size: 12px;
}

#delayListTasks .table-body .parent-task-row.border-bottom-row,
#delayListTasks .table-body .sub-task-row.border-bottom-row{
    border-bottom: 1px solid #C0BFBB;
}

#delayListTasks table tr td{
    padding: 5px;
    border-bottom: 1px solid #C0BFBB;
}

#delayListTasks .fix-intro{
    font-size: 16px;
    font-weight: 700;
}

#delayListTasks input[type=text]{
    width:  46px;
    height: 36px;
    text-align: center;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 0 4px;
}

#delayListTasks .parent-task-row .date-panel{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #C0BFBB;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #75716B;
}

#delayListTasks .sub-task-row .date-panel{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    /*line-height: 16px;*/
    text-align: center;
    color: #75716B;
}

#delayListTasks .cancel-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #000000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    width: 220px;

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

#delayListTasks .confirm-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    background: #FFD200;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    width: 220px;

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

.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#1f1f1f;
  position:relative;
}

.tree.no-border,
.tree.no-border ul {
  margin: 0;
}

.tree ul {margin-left:.5em} 

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px dashed #C0BFBB;
}

.tree.no-border:before, 
.tree.no-border ul:before{
  border-left: none;
}

.tree li {
  margin:0;
  line-height:2em; /* default list item's `line-height` */
  position:relative;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px dashed #C0BFBB;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree.no-border li:before {
  border-top: none;
}

.tree li:last-child:before {
  background: #F5F5F5;
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}

.tree.no-border li:last-child:before {
  background: transparent;
}

.tree li:after {
  position: absolute;
  left: 9px;
  top: -1px;
}

.tree:after {
  position: absolute;
  left: -3px;
  top: -8px;
}

.calculation-overlay{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    /*background: #000000; */
    /*opacity: 0.6; */
    background: rgba(0, 0, 0, 0.6);
    z-index: 2; 
    top:0; 
    display: none;
}

.loading-bar-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    width: 282px;
    position: fixed;
    top: 58%;
    right: 50%;
    transform: translate(50%,-50%);

    background: #FFFFFF;
    box-shadow: 0px -17px 29px rgba(75, 54, 0, 0.07), 0px -6.20528px 10.5855px rgba(75, 54, 0, 0.0482987), 0px -3.01255px 5.13905px rgba(75, 54, 0, 0.0389404), 0px -1.47681px 2.51926px rgba(75, 54, 0, 0.0310596), 0px -0.583932px 0.996119px rgba(75, 54, 0, 0.0217013);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.loading-bar-container .loading-bar-wrapper{
    display: flex;
    justify-content: center;

    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    width: 100%;
}

.loading-bar-container progress {
    width: 100%;
    height: 8px;
    color: #FFD200;
    background: #C0BFBB;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.loading-bar-container progress::-moz-progress-bar {
    background: #FFD200;
}

.loading-bar-container progress::-webkit-progress-value {
    background: #FFD200;
}

.loading-bar-container progress::-webkit-progress-bar {
  background: #C0BFBB;
}

.mfp-zoom-out-cur .mfp-image-holder .mfp-close{
    display: none;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close{
    cursor: default;
}

.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;
}

.mfp-arrow{
    outline: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    -o-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 1;
    margin: 0;
    margin-top: -25px !important;
}
.mfp-arrow-left:after,
.mfp-arrow-left:before,
.mfp-arrow-right:after,
.mfp-arrow-right:before,
.mfp-a,
.mfp-b{
    border: none;
    margin: 0;
}
.mfp-arrow-left:after,
.mfp-arrow-left:before{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*content: "\e916";*/
    color: #000000;
    font-size: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
}
.mfp-arrow-right:after,
.mfp-arrow-right:before{
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*content: "\e916";*/
    color: #000000;
    font-size: 20px;
    position: absolute;
    top: 30px;
    left: 30px;

    
}
.mfp-arrow:hover{
    background: #FFD200 !important;
}
.mfp-arrow-left:hover:after,
.mfp-arrow-right:hover:after,
.mfp-arrow:hover:before{
    color: #000000;
}
.mfp-arrow-right{
    right: 10%;
}
.mfp-arrow-left{
    left: 10%;
}

.mfp-arrow-left i,.mfp-arrow-right i{
  color: #000;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;

  pointer-events: none;
}

.mfp-arrow-left i{
  -webkit-transform: translate(-55%,-50%);
  -moz-transform: translate(-55%,-50%);
  -ms-transform: translate(-55%,-50%);
  -o-transform: translate(-55%,-50%);
  transform: translate(-55%,-50%);
}

.mfp-arrow-right i{
  -webkit-transform: translate(-45%,-50%);
  -moz-transform: translate(-45%,-50%);
  -ms-transform: translate(-45%,-50%);
  -o-transform: translate(-45%,-50%);
  transform: translate(-45%,-50%);
}

.mfp-arrow-right i:before{
  display: inline-block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.visibility-hidden{
    visibility: hidden !important;
}

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

.hidden{
    display: none !important;
}

img.mfp-img{
    max-height: 90vh !important;
}

.mfp-bg,
.mfp-wrap{
    z-index: 3000;
}


/*modal for delay*/
#delayTasks p{
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    margin: 20px 0;
}
#delayTasks .modal-body{
    padding:  40px ;
}
#delayTasks .main-icon-indication {
    text-align: center;
}
#delayTasks .main-icon-indication i{
    font-size: 40px;
}

.delete--subtask-btn,.delete--subtask-btn:hover,.delete--subtask-btn:focus{
    display: inline-block;
    background: #EE4056;
    line-height: 36px;
    padding: 0 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.delete--subtask-btn2,.delete--subtask-btn2:hover,.delete--subtask-btn2:focus{
    display: inline-block;
    background: #EE4056;
    line-height: 36px;
    padding: 0 ;
    width:  36px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    position: absolute;
    right: 0;
    top: 0;
}

.delete--subtask-btn3,.delete--subtask-btn3:hover,.delete--subtask-btn3:focus{
    display: inline-block;
    background: #EE4056;
    line-height: 36px;
    padding: 0 ;
    width:  36px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    
}

.delete--subtask-btn i{
    display: inline-block;
    margin-right: 5px;
}

.weekly-panel{
    display: inline-block;
    width:  200px;
    
    position: relative;
    font-weight: 700;
}
.weekly-panel i{
    display: inline-block;
    position: relative;
    font-size: 24px;
    top: 6px;
    margin-right: 10px;
}

.weekly-panel.text-style-regular{
  font-weight:normal;
}
.milestone--status{
    display: inline-block; 
    margin: 0 10px; 
    background: #00B485;
    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; padding: 5px 10px
}
.completed-green--status{
    display: inline-block; 
    
    background: #00B485;
    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; 
    border:  none;
}

.flagged-red--status{
    display: inline-block; 
    
    background: #FCDEDF;
    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #EE4056; 
    border:  none;
}

.milestone-name{
    font-size: 16px;
    font-weight: 700;
}
.reject-project--btn,.reject-project--btn:hover,.reject-project--btn:focus{
    background: #EE4056;
    border:  none;
    color: #fff;
    font-weight: 700;
}
.approve-project--btn{
    line-height: 36px;
    min-width: 120px;
    vertical-align: top;
    font-weight: 700;
}



.prompt-modal .modal-body{
    padding: 50px 50px;
}
.approval-note{
    line-height: 16px;
    margin: 20px 0;
}


#contact-modal .popup-profile{
    width:  100px;
    height: 100px;
    margin: 0 auto 40px auto;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    border:  1px solid black;
}

.edit-push-client--form .upload--listing .row [class^=col],.edit-push-client-step2--form .upload--listing .row [class^=col]{
    padding-top: 15px;
}

.edit-push-client--form .taskimage-uploaded.active,.edit-push-client-step2--form .taskimage-uploaded.active,.edit-completed-task--form .taskimage-uploaded.active{
    border: 3px solid #EFAC00;
}

.edit-push-client--form .taskimage-uploaded.active:after,
.edit-push-client-step2--form .taskimage-uploaded.active:after{
    content:  "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    background: none;
    z-index: 3;
}

.taskimage-wrapper .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-wrapper .input-container{
    margin-bottom: 0;
    display: block;
}

.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);
}

.timeline-lottie{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: #FFFFFF;*/
    background: url(../images/workplacebg.png) repeat;
    z-index: 1200;
    bottom: 0;
    top: 0;
    left: 0;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 24px 40px;
}

.timeline-lottie.no-bg{
  background-image: none;
}

.timeline-lottie .timeline-lottie-content{
    /*flex: 1;*/
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 16px;
}

.timeline-lottie-content {
    width: 100px;
    height: 100px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.timeline-lottie .timeline-lottie-label{
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #75716B;
}

.timeline-lottie.showFlex{
    display: flex;
}

#lottie{
    /*background-color:#ffffff;*/
    /*width:100%;*/
    /*height:100%;*/
    width: 80px;
    height: 80px;
    display:block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
}



/*maintenance*/
.maintenance-header{
    background: #000;
    padding: 15px;
    font-family: 'Platform Bold';
    color: #fff;
    text-align: center;
}

.maintenance-header img{
    display: inline-block;
    width: 40px;
    margin-right: 10px;

}

.maintenance-body{
    padding-top: 5%;

}

.maintenance-body h4{
    font-size: 24px;
    font-weight: 700;
}

.maintenance-body p{
    font-size: 16px;
}

.maintenance-body img{
    padding-bottom: 5%;
}


.mark-as-complete-taskname-label{
  word-wrap: break-word;
    font-size: 19px;
    line-height: 23px;
    font-weight: 600;
    color: #000000;
    margin-top:  10px;
    margin-bottom: 10px;
}



.no-project-startdate--panel{
    border: 1px solid #EE4056;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 15px 5px 15px 50px;
    color: #EE4056;
    position: relative;
    min-height: 40px;
    font-size: 14px;
    line-height: 16px;
}
.no-project-startdate--panel span{
    display: table-cell; vertical-align: middle; height: 30px
}
.no-project-startdate--panel i{
    position: absolute;
    left:  10px;
    font-size: 26px;
    top:  20px;

}

.disclaimer-notes{
    background: #FFFAE9; border: 1px solid #EFAC00; -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; padding: 5px 10px; margin: 10px 0; line-height: 14px; font-size: 14px
}

.task-drawer--disclaimmer-notes,
.schedule-disclaimer-notes{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 16px;
  gap: 8px;
  background: #FFF4F4;
  border: 1px solid #EE4056;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.task-drawer--disclaimmer-notes span,
.schedule-disclaimer-notes span{
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #EE4056;
}

.task-drawer--disclaimmer-notes span.font-bold,
.schedule-disclaimer-notes span.font-bold{
  font-weight: 700;
}
.red-disclaimer-notes{
  background: #FFF4F4; border: 1px solid #EE4056; -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; padding: 5px 10px; margin: 10px 0; line-height: 14px; font-size: 14px 
}
.add-custom-special-task--evt{
    border-bottom: 1px solid #E5E5E1;
    margin: 0 ;
    padding: 5px 10px;
    font-style: italic;
}
.add-custom-special-task--evt:hover,.add-custom-special-task--evt:focus{
    text-decoration: none;
}
.add-custom-special-task--evt i{
    font-size: 20px;
    position: relative;
    top: 3px;
    margin-right: 10px;
}
.special-task-selected--panel{
    padding: 10px 30px 10px 10px; 
    min-height: 30px; 
    border: 1px solid #C0BFBB; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    background: #fff;
    line-height: 20px;
    position: relative;
    overflow: hidden;
    word-break: initial;
}
.project-item-quick-edit--content .special-task-selected--panel{
    /*max-width: 250px;*/
    width: 85%;
}

.special-task-selected--panel .close-special-task-panel--evt{
    position: absolute;
    right: 10px;
}

.task-name--display{
    font-size: 16px;
}

.task-name--display b{
  line-height: 14px;
  display: table-cell;
}

.task-name--display .icon-Others_Featured,.taskNameTxt .icon-Others_Featured,.special-task-selected--panel .icon-Others_Featured{
    color: #EFAC00;
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 20px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
.project-item-quick-edit--content .special-task-selected--panel.contain-special{
  padding-top: 7px;
  padding-bottom: 8px;
}
.special-task-option--panel{
    position: relative;
    z-index: 3;
    top: -15px;
}

.special-task-selected--panel.disabled{
    pointer-events: none;
    cursor: not-allowed;
    color: #0c0c0c;
    background: #ededed;

    background: transparent;
    padding: 10px 0;
    border: none;
}

.special-task-selected--panel.disabled a{
    display: none;
}

.project-item-quick-edit--content .special-task-option--panel{
    top: 0;
}
.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.open{
    display: block;
}

.special-task-option--panel a{
    display: block;
}

.special-task-option--panel ul{
    list-style: none;
    padding: 0 10px;
    max-height: 100px;
    overflow: auto;
    margin: 0 5px 0px -10px;

}

.special-task-option--panel ul li a.add-special-task--evt{
    color: #000;
    padding: 5px 10px;
}
.special-task-option--panel ul li a.add-special-task--evt.disabled,.special-task-option--panel ul li a.add-special-task--evt.hasCompletedTask{
    opacity: 0.3;
}
.special-task-option--panel ul li a:hover{
    background: #cecece;
    text-decoration: none;
}

.add-edit-quotation-variant--form .taskimage-wrapper{
  max-width:90px;
}


/* ######  */
/* Responsive */
/* ######  */

@media(max-width:1440px){
    .milestone-group .task-dates{
        font-size:12px;
        padding:5px 10px;
        min-width:initial;
    }
}

@media(max-width:1440px){
    .milestone-group .task-dates{
        padding:5px 6px;
    }
}

.user-form .col-sm-4{
  min-height:100px;
}

.mogservice--form2 hr{
  margin: 40px 0 20px 0;
}


.owner-company--panel{
  background: #F5F5F5;
  border: 1px solid #E6E5E1;
  padding: 10px;
  margin: 10px 0;
  text-align: center;
  color: #75716B;
}

.owner-company--panel strong{
  display: block;
  color: #75716B;
}

.owner-company--panel strong span{
  color: #000;
}
.owner-pic--panel{
  padding: 10px;
  text-align: center;
}

.owner-pic--panel i{
  color: #EFAC00;
}

.owner-pic--panel strong{
  display: block;
}

.owner-pic--panel .pic-details--item{
  display: inline-block;
  padding: 0 5px;
}

.card3 {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #C0BFBB;
    padding: 20px ;
}

.card3 .card-header{

}

.template-task--page .milestone--item .milestone-action--panel{
/*  padding-right:20px;*/
  top:50%;
  right:30px;
  transform:translateY(-50%);
}

.template-task--page .milestone--item .milestone-action--panel .indication-arrows{
  right:-10px;
}

.template-task--table tr td{
  line-height: 14px;
  vertical-align: middle;
  padding: 0 5px 5px;
}

.template-task--table tr td .form-control{
  height: 24px;
  min-height:30px;
  font-size: 12px !important;
  padding: 0 20px 0 5px;
}

.template-task--table select[readonly]{
  pointer-events: none;
  background: #ededed !important;
  border:none !important;
}

.template-task--table input[readonly]{
  background: #ededed !important;
  border:none !important;
}

.template-task--table-setting tr{
  margin-bottom:5px;
}

.template-task--table-templateTaskName{
  margin-bottom:10px;
}

.template-task--table-templateTaskName.parent-task-name input{
  border:2px solid #000 !important;
}

.template-task--table-templateTaskName span{
  width:10%;
}

.template-task--table-templateTaskName input{
  width:80%;
  display:inline-block;
}

.template-task--table-templateTaskName~input{
  width:50px;
  text-align:center;
  border-radius:5px;
  padding:4px 0;
  font-size:12px;
}

.task--item2.even {
  background: #ededed;
}

.project-view-filter--container .filter-switch-item i{
  font-size:16px;
  vertical-align:middle;
}

.project-view-filter--right {
    float: right;
    display: inline-block;
}
.project-view-filter--left {
    display: inline-block;
    float: left;
}

/*MPTL View*/
.not-in-team-text{
  color:#75716B;
  font-style:italic;
  font-size:12px;
  font-weight:bold;
}


.environment-settings--banner{
  position: fixed; 
  min-height: 24px; width: 100%; z-index: 2000; 
  background: green;
  font-weight: 700;
  opacity: 0.75;
  top: 0;
  padding: 0 10px;
  color: #fff;
  transition: all 0.1s ease;
}

.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;
}



.project-objective--view .forecast-monthly-figure--panel{
  background: none;
}
.project-bum--name{
  font-size: 20px;
  font-family: 'Platform Bold',Arial;
}

.project-bum--view .project-objective-total--view .forecast-monthly-figure--panel{
  border: 1px solid #C0BFBB;
  background: #fff;
}

.forecast-overdue-invoice--panel{
  color: #EE4056;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
  padding: 15px;
}
.forecast-overdue-invoice--panel .forecast-overdue-invoice-amt{
  font-weight: bold;
  font-style: normal;
}

.col-sm-12:nth-child(2)>.forecast2-item{
  margin-bottom: 20px;
  
}
.forecast2-item{
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #C0BFBB;
  margin-bottom: 20px;
  padding: 5px 36px 0 11px;
  position: relative;
  overflow: hidden;
  display: block;
}

.forecast2-item label{
  color: #75716B;
  font-size: 14px;
  display: block;
  float: left;
  width: 30%;
  padding-top: 5px;
}

.forecast2-item .forecast2--amount{
  float: left;
  text-align: right;
  width: 70%;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
}
.forecast2-item.forecast-green:before{
  content:"";
  width: 3px;
  display: block;
  background: #00B485;
  height: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
}

.forecast2-item.forecast-green div{
  color: #00B485; 
}


.forecast2-item.forecast-red:before{
  content:"";
  width: 3px;
  display: block;
  background: #EE4056;
  height: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
}

.forecast2-item.forecast-red div{
  color: #EE4056; 
}


.forecast2-item.forecast-yellow:before{
  content:"";
  width: 3px;
  display: block;
  background: #FFD200;
  height: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
}
.forecast2-item.forecast-yellow .dropdown-toggle2{
  cursor: pointer;
}
.forecast2-item.forecast-yellow .indication-arrows.dropdown-toggle2{
  position: absolute;
  right: 10px;
  color: #C0BFBB;
}

.forecast-project-toggle.yellow-txt .dropdown-toggle--evt{
  color: #C0BFBB;
}


.forecast2-item.forecast-yellow .forecast2--amount{
  color: #EFAC00; 
}


.forecast2-item ul{
  display: none;
  width: calc(100% + 43px);
  border-top: 1px solid #C0BFBB;
  padding-top: 20px;
  position: relative;
  left: -8px;

}
.forecast2-item ul > li{
  list-style: none;
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.forecast2-item ul > li em{
  font-weight: 400;
  display: inline-block;
  width: 40%;
  text-align: left;
}
.forecast2-item ul > li div{
  display: inline-block;
  width: 60%;
  padding-right: 40px;
}
.forecast2-item ul > li:before{
  content: "";
  position: absolute;
  display: block;
  height: 22px;
  width: 13px;
  left:0px;
  top: -10px;
  z-index: 1;

/*  border-left: 1px dashed rgba(255, 255, 255, 1.3);  */
  border-left: 1px dashed #C0BFBB;  
}

.forecast2-item ul > li span:before{
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  width: 13px;
  left:0px;
  top: 2px;
  z-index: 1;
  border-bottom: 1px dashed #C0BFBB;   
}


.forecast2-item:last-child:first-child{
  margin-bottom: 0 ;
}
.forecast2--amount{
  font-size: 20px;
}

/*Finance Report*/

.count-summary {
    margin: 20px 0 0px 0;
    padding: 0;
    font-style: italic;
    color: rgba(117, 113, 107, 1);
    font-weight: 700;
}

.data-listings--list-view-container{
    width:100%;
    overflow-x:auto;
}

.data-listings--list-view-content{
    min-width:2000px;
    height:calc(100vh - 270px);
}

.data-listings--list-view-content table{
    table-layout: fixed;
    width:100%;
    text-align:left;border-collapse: separate
}

.data-listings--list-view-content table thead {
    position:sticky;
    top:0;
    z-index:10;
}

.data-listings--list-view-content table thead th{
  font-style:italic;
  font-weight:bold;
  color:#75716B;
  padding:6px 8px;
}

.data-listings--list-view-content table thead th:first-child, .data-listings--list-view-content table tbody tr td:first-child {
    position: sticky;
    left: 0;
    width: 370px;
    height: auto;
    background: #FFF;
    z-index: 9;
}

.data-listings--list-view-content table thead th:first-child{
  background:#E6E5E1;
  vertical-align: middle;
  top:0;
  z-index:10;
}

.data-listings--list-view-content table tbody tr td{
    word-break: break-word;
    border-bottom:1px solid #C0BFBB;
    padding-top:16px;
    line-height:19px;
}

/*.data-listings--list-view-content tbody tr:hover{
    background:#F5F5F5;
}*/

.data-listings--list-view-content table > thead > tr > th{
  background:#E6E5E1;
}

.data-listings--list-view-content table > thead > tr > td{
  background:#F5F5F5;
  color:#75716B;
  font-weight:bold;
  padding:6px 8px;
}

.data-listings--list-view-content table h4{
    margin-bottom:8px;
    margin-top:0;
}

.data-listings--list-view-content .project-list--completion-date.project-list--greybox{
  margin-bottom:10px;
}

.data-listings--list-view-content .project-list--completion-date.project-list--greybox h4{
  margin-bottom:0;
}

.data-listings--list-view-content table p{
    margin-bottom:0px;
}

.data-listings--list-view-content .finance-report--teammember-list ul{
    padding-left:0;
}

.data-listings--list-view-content .finance-report--teammember-list div:nth-child(2){
    border-top:1px solid #E6E5E1;
    padding-top:15px;
}

.data-listings--list-view-content .finance-report--teammember-list h5,
.data-listings--list-view-content .project-list--planning-date h5,
.data-listings--list-view-content .project-list--makeover-date h5{
    color:#75716B;
    margin:0 0 8px;
}

.data-listings--list-view-content .finance-report--teammember-list span{
    font-size:0.87em;
    color: #75716B;
}

.data-listings--list-view-content .finance-report--teammember-list li{
    list-style: none;
    display:inline-block;
    width:49%;
    vertical-align:top;
}

.data-listings--list-view-content .project-list-txt--icon{
    padding-left:20px;
    line-height:19px;
    margin-bottom:4px;
    display:inline-block;
    vertical-align:middle;
}

.data-listings--list-view-content .project-list-txt--icon i{
  font-size:15px;
}

.data-listings--list-view-content .pills.fixed-icon{
    margin-top: 0;
    display: inline-block;
    margin-bottom:10px;
    vertical-align: top;

}

.data-listings--list-view-content .project-value-panel--type{
  min-width:95px;
  text-decoration: underline;
}

.data-listings--list-view-content .project-value-panel--due-date{
  min-width:80px;
  text-align:center;
  vertical-align: middle;
  padding:2px 8px 1px;
  margin:0 5px 0 8px;
}

.data-listings--list-view-content .project-cost>h4{
  font-size:14px;
  font-weight:normal;
}

.data-listings--list-view-content .project-cost>h4 strong{
  font-size:1.1em;
}

.data-listings--list-view-content .project-cost a{
  margin-bottom:7px;
}

.data-listings--list-view-content .project-cost a:hover{
  text-decoration: none;
}

.data-listings--list-view-content .project-cost.not-allow a:active{
  pointer-events: none;
}

.data-listings--list-view-content .project-cost.not-allow .icon-Action_Link-Out{
  display:none;
}

.data-listings--list-view-content .project-cost.not-allow-cursor,
.data-listings--list-view-content .project-cost.not-allow-cursor a{
  cursor: not-allowed;
}

.data-listings--list-view-content .project-list-cost-value hr{
  padding:10px 0 0px;
}

.data-listings--list-view-content .project-list-cost-value h4 span{
  color:#75716B;
}

.data-listings--list-view-content .project-list-cost-total{
  border-radius: 6px;
  border: 1px solid var(--greys-grey-2, #E5E5E1);
  background: var(--greys-grey-1, #F5F5F5);
  padding:7px 10px !important;
  display:block;
  width:100%;
}

.data-listings--list-view-content .project-list-cost-total h4{
}

.data-listings--list-view-content .project-list--cost-vo h4 span{
  width:80px;
  display:inline-block;
}

.data-listings--list-view-content .project-list--cost-vo ul{
  position: relative;
  padding-left: 20px;
  margin-top: 13px;
}

.data-listings--list-view-content .project-list--cost-vo ul li {
    position: relative;
    list-style-type: none;
    margin-bottom: 5px;
}

.data-listings--list-view-content .project-list--cost-vo ul li{
  list-style-type: none;
}

.data-listings--list-view-content .project-list--cost-vo ul:before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    top: -6px;
    left: 3px;
    border-left: 1px dotted #C0BFBB;
}

.data-listings--list-view-content .project-list--cost-vo ul li:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 5px;
    position: absolute;
    top: 12px;
    left: -16px;
    /* transform: translateY(-50%); */
    border-top: 1px dotted #C0BFBB;
}

.data-listings--list-view-content .project-list--cost-vo ul li h4 span{
  width:65px;
  padding-left:10px;
}

#viewQuotationVOAssets .modal-header{
    width:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    padding:40px;
    border:none;
}

#viewQuotationVOAssets .modal-content{
    padding-top:80px;
    border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
}

#viewQuotationVOAssets .modal-body{
    padding:0 40px;
    height:48vh;
}

#viewQuotationVOAssets .modal-header h4,
#viewQuotationVOAssets .modal-header button{
    display:inline-block;
}

.qvo-media--item {
    max-width: 96px;
    height: auto; 
    width: 100%;
    aspect-ratio: 1 / 1;
    display: inline-block;
    margin-right: 10px;
    border-radius: 15px;
    margin-bottom:10px;
}

.qvo--file-container{
    margin: 20px 0 !important;
    list-style: none;
    padding-left: 0;
}

.qvo--file-container li{
    padding: 0;
    border-top: 0 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    display:inline-block;
}

.qvo--file-container li a{
    border: 1px solid #000;
    -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;
    margin-right:10px;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    display: inline-block;
}

.qvo-media--item.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;
}

.stage-circle-icon{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#C0BFBB;
    display:inline-block;
    margin-right:3px;
}

.stage-circle-icon.stage-circle--grey{
    background:#C0BFBB;
}
.stage-circle-icon.stage-circle--lightyellow{
    background:#FFE982;
}
.stage-circle-icon.stage-circle--mediumyellow{
    background:#FFD200;
}
.stage-circle-icon.stage-circle--yellow{
    background:#EFAC00;
}
.stage-circle-icon.stage-circle--lightgreen{
    background:#00B485;
}
.stage-circle-icon.stage-circle--green{
    background:#008562;
}

#projectViewOption,
#projectViewType{
  padding:2px 5px;
}

.project-view-type-filter,
.project-view-option-filter{
  display:inline-block;
  vertical-align:middle;
}

.project-view-type-filter .filter-switch li label,
.project-view-option-filter .filter-switch li label{
  padding:2.5px 10px;
}

.project-view-type-filter{
/*  width:260px;*/
  margin-left:20px;
  display:inline-block;
  vertical-align: middle;
}

.project-view-type-filter,
.project-view-option-filter{
  background:#F5F5F5;
  border-radius: 6px;
  text-align: center;
}

.project-view-type-filter a,
.project-view-option-filter a{
  display:inline-block;
  padding:2.5px 10px;
  line-height: 30px;
  font-weight: 700;
  border-radius: 6px;
  position:relative;
}

.project-view-option-filter a{
  padding:2.5px 20px;
}

.project-view-type-filter a p,
.project-view-option-filter a p{
  position:relative;
  z-index:2;
  margin-bottom:0;
  vertical-align: middle;
  display: inline-block;
}

.project-view-type-filter a:before,
.project-view-option-filter a:before{
  content:"";
  width:98%;
  height:85%;
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  transition:0.15s ease-in-out;
  -webkit-transition:0.15s ease-in-out;
  -moz-transition:0.15s ease-in-out;
}

.project-view-type-filter a.selected,
.project-view-option-filter a.selected{
  color:#FFD200;
  font-weight:bold;
}

.project-view-type-filter a.selected:before,
.project-view-option-filter a.selected:before{
  background: #fff;
  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);
  transition:0.15s ease-in-out;
  -webkit-transition:0.15s ease-in-out;
  -moz-transition:0.15s ease-in-out;
}

.project-view-filter--filter-cta{
  margin:0 10px 0 32px;
  position:relative;
  top:initial;
  left:initial;

  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #75716B;
}
.project-view-filter--filter-cta.contextual-menu--icon.with-txt .dropdown-toggle span:first-child,
.project-view-filter--filter-cta.contextual-menu--icon.with-txt .dropdown-toggle i:first-child{
  position:relative;
  top:initial;
  right:initial;
  transform:initial;
  display:inline-block;
  vertical-align: middle;
}
.project-view-filter--filter-cta.btn-group.contextual-menu--icon.with-txt.open .dropdown-toggle i:first-child{
  color:#323534;
}
.project-view-filter--show-column .dropdown-menu ul li{
  width:49%;
  display:inline-block;
}
.project-view-filter--show-column .dropdown-menu ul li[data-value='all']{
  width:100%;
}
.data-listings--list-view-content .project-value-container{
  margin-bottom:10px;
}
.data-listings--list-view-content .project-value-status-icon{
  font-size:20px;
  line-height:20px;
  font-weight:400;
}
.data-listings--list-view-content .project-value-panel--type{
  padding:0 10px 0 5px;
  vertical-align:middle;
}
.data-listings--list-view-content .project-value-panel{
  width:120px;
}

.data-listings--list-view-content .project-value-container .project-value-panel.payment-due--red{
  color:#75716B;
}

.data-listings--list-view-content .project-value-panel--due-date{
  border:1px solid #C0BFBB;
  border-radius:12px;
  color:#75716B;
  padding: 3px 10px 1px;
  font-size: 10px;
  font-weight:bold;
}

.data-listings--list-view-content .project-value-panel--due-date.payment-due--red{
  color:#EE4056;
  border:1px solid #EE4056;
}

.data-listings--list-view-content .project-value-cta{
  font-size: 20px;
  line-height: 25px;
  color: #000;
  font-weight: 700;
  margin: 0;
  position: relative;
}
.data-listings--list-view-content .project-value-cta a{
  display:inline-block;
  position:relative;
  margin-right:5px;
}
.data-listings--list-view-content .project-value-cta a i{
  position: absolute;
  left:50%;
  top:50%;
  margin:0;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  text-decoration: none; 
  color:#000;
}

.data-listings--list-view-content .project-progress-txt span{
  width:100%;
}

.data-listing--pagination{
  position: absolute;
  bottom: 24px;
  right: 40px;
}

.list-project--page .data-listing--pagination{
  bottom: 15px;
}

.project-remark--form .project-remark--panel a{
  color:#EFAC00;
  text-decoration:underline;
  text-align:right;
  padding-top:5px;
  float:right;
}

.row.flex-grid.project-progress--content{
  width:98%;
  margin:0 auto !important;
}

.project-progress--week-panel{

  padding:10px 0;
  background:#F5F5F5;
  border:1px solid #C0BFBB;
  border-radius:5px;
  text-align:center;
}

.project-progress--week-panel p{
  color:#75716B;
  margin-bottom:0;
}

.project-progress--week-panel p strong{
  color:#000;
  font-size:1.1em;
}

.project-progress--item .pills.fixed-icon{
  display:inline-block;
}

.project-progress--item ul{
  position:relative;
  padding-left:20px;
  margin-top:13px;
}

.project-progress--item ul:before{
  content:"";
  width:1px;
  height:100%;
  position:absolute;
  top:-12px;
  left:3px;
  border-left:1px dotted #C0BFBB;
}

.project-progress--item ul li i,
.project-progress--item ul li p{
  display:inline-block;
  vertical-align: middle;
  margin-bottom:0;
}

.project-progress--item ul li{
  position:relative;
  list-style-type: none;
  margin-bottom:5px;
}

.project-progress--item ul li:before{
  content:"";
  display:inline-block;
  width:10px;
  height:5px;
  position:absolute;
  top:12px;
  left:-16px;
/*  transform:translateY(-50%);*/
  border-top:1px dotted #C0BFBB;
}

.project-progress--item ul li i{
  display:inline-block;
  width:auto;
  vertical-align: top;
  font-size: 16px;
  margin-top: 3px;
  margin-right: 3px;
}

.project-progress--item ul li>div{
  display:inline-block;
  width:80%;
  vertical-align: top;
}

.project-progress--item ul li>div span{
  color: #75716B;
  font-style:italic;
  font-family:'DM Sans', sans-serif;
  display:block;
  font-size:14px;
  line-height:18px;
}

.project-progress--item ul li.red-icon>div span{
  color:#EE4056;
}

.project-progress--item .project-progress--item-desc p{
  line-height:14px;
  color:#000;
}

.project-progress--item ul li>div span .weekly-panel.done{
  color:#C0BFBB;
}

.project-progress--item .done .project-progress--item-desc p{
  color:#75716B;
}

.project-progress--item .new-branding-red-color .project-progress--item-desc p{
  color:#000;
}

.project-progress--panel-address{
  color:#75716B;
}

.green-icon i{
  color:#00B485;
}

.red-icon i{
  color:#EE4056;
}

#viewProjectProgress .modal-content{
  padding-top:0;
}

#viewProjectProgress .modal-header{
  position:relative;
}

.modal-loading{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
}

.payment-popup--form-container .modal-title{
  margin-bottom:5px;
}
.payment-popup--form-container .modal-footer{
  z-index: 1001;
}
.payment-popup--info .container-fluid{
  border:1px solid #C0BFBB;
  border-radius:6px;
  margin:0 auto 20px;
}
.payment-popup--property-name h5{
  font-size:16px;
}
.payment-popup--property-details{
  margin-bottom:20px;
}
.payment-popup--property-details > div{
  display:inline-block;
  margin-right:24px;
}
.payment-popup--info-property,
.payment-popup--info-company,
.payment-popup--info-pic{
  padding-bottom:10px;
}
.payment-popup--info-property p,
.payment-popup--info-company p,
.payment-popup--info-pic p{
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
}
.payment-popup--assets{
  padding-bottom:20px;
}
.payment-popup--assets .white-card{
  padding-top:15px !important;
  border-top:1px solid #E5E5E1;
  border-radius:0 !important;
}
.payment-popup--assets textarea.remarks{
  margin-top:10px;
}
.payment-popup--form-container a[data-dismiss="modal"]{
  min-width: 120px;
  display: inline-block;
  width: auto;
  text-align: center;
  padding: 0 20px;
  line-height: 48px;
  margin-right:10px;
}
.payment-popup--form-container .taskimage-wrapper{
  max-width:90px;
  max-width:90px;
}
.payment-popup--form-container .white-card{
  padding:0;
}

.project-list-thead th,
.project-column{
    border-right:1px solid #C0BFBB;
}

.project-list-thead th[data-content="project"]{
  width:350px;
}

.project-list-thead th[data-content="basic-info"]{
  width:1320px;
}

.project-list-thead th[data-content="makeover-progress-info"]{
  width:1600px;
}

.project-list-thead th[data-content="project-value"]{
  width:600px;
  position:sticky;
  left:3170px;
}

.project-column--info-content{
    margin:0;
    padding:0;
}

.project-column--info-content li{
    display:inline-block;
    width:45%;
    list-style-type:none;
}

.project-column--num{
  display:inline-block;
  padding-right:10px;
  width:40px;
  vertical-align:top;

  position:absolute;
  left:0;
}

.project-column--action{
  width: 20px;
  height: auto;
  position: relative;
  display: inline-block;
  margin-right:5px;

  position:absolute;
  left:30px;
}

.project-column--action a,
.project-column--action .contextual-menu--icon{
  min-width:auto;
  width:100%;
  position:relative;
  top:initial;
  right:initial;
  margin-top:2px;
  display:inline-block;
  text-align:center;
}

.project-column--action a.project-quick-action--btn.unsilent:before{
  right:50%;
  transform:translateX(50%) rotate(35deg);
}

.project-column--action .contextual-menu--icon .dropdown-menu-right{
  right:initial;
  left:0;
}

.project-column--action .contextual-menu--icon .dropdown-menu-right a{
  text-align:left;
}

.project-column--action .contextual-menu--icon{
  position:relative;
  top:initial !important;
  right:initial !important;
  margin-top: -4px;
}

.project-column--action a .project-missing-team--tooltip{
  left:0;
  background:#FFF;
}

.project-column--action a:first-child{
  z-index:10;
}

.project-column--info{
  display:inline-block;
  width:300px;
  vertical-align:top;
  padding-right:10px;

  padding-left:50px;
}

.project-column--info-cta{
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.project-column--info-state{
  display:block;
  font-size:0.8em;
  padding-top:5px;
}

.project-item--gID{
  font-style:italic;
  font-weight:700;
  color:#75716B;
  font-size:14px;
  font-family: 'DM Sans', sans-serif;
}

.project-column--cta{
  display:inline-block;
  width:25px;
  vertical-align:top;
  float:right;
  position: absolute;
  right: 10px;
  top: 20px;
}

.project-column--cta img{
  margin-top:-5px;
}

.project-column--cta.disabled{
  opacity:0.15;
}

.project-user-info-column .project-list-txt--icon{
    padding-right:15px;
}

.project-list-view--owner-info,
.project-list-view--pic-info,
.project-list-view--company-info{
    margin-bottom:12px;
}

.project-list-view--pic-info span{
  color:#75716B;
}

.project-list--greybox{
    background:#F5F5F5;
    border:1px solid #E6E5E1;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    padding:8px;
}

.project-list--greybox.red-overdue{
  border:1px solid #EE4056;
  color:#EE4056;
  background:#FFF4F4;
}

.project-list-view--company-info strong{
    color:#75716B;
}

.project-list-editedPhotos a{
  margin-bottom:10px;
  display:block;
  color:#EFAC00;
  text-decoration: underline;
}

.project-list--remark .circle--btn{
    position:relative;
}

.project-list--remark-content{
    position:relative;
    margin-bottom:15px;
}

.project-list--remark-rm{
    width:80%;
    text-align:left;
    display:inline-block;
    vertical-align:top;
}

.project-list--remark-rm a{
  color:#EFAC00;
  font-weight:bold;
}

.project-list--remark-datetime{
  padding-top:5px;
}

.project-list--editby .stage-circle-icon{
  margin:0 5px;
}

.project-list--editby>p{
  font-style:italic;
}

.project-list-view--services ul{
    list-style-type:none;
    margin-left:0;
    padding-left:0;
}

.project-list-view--services ul li{
    margin-bottom:8px;
    color:#000;
    font-weight:bold;

    display:table;
}

.project-list-view--services ul li>div{
    display:table-cell
}

.project-list-view--services ul li>h4{
    display:table-cell;
}

.project-list--planning-date,
.project-list--makeover-date{
    width:100%;
}

.project-list--planning-date ul,
.project-list--makeover-date ul{
    padding-left:0;
}

.project-list--planning-date ul li,
.project-list--makeover-date ul li{
    display:inline-block;
    width:45%;
}

.project-list--planning-date ul li:last-child,
.project-list--makeover-date ul li:last-child{
    padding-left:15px;
}

.project-list--stage-info{
    position:relative;
}

.project-list--stage-info .project-progress{
    margin-top:15px;
}

.project-list--progress-info-cta{
    width: 27px;
    height: 27px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.project-list--progress-info-cta:hover{
    text-decoration:none;
}

.project-list--progress-info-cta i{
    font-size:28px;
    color:#EFAC00;
}

/*MPTL End*/

.overall-view{
/*  background: #FFFAE9;*/
  border: 2px solid #EFAC00;

}
.overall-view .card-header{
  text-align: center;
  margin-bottom: 20px;
}



.project-objective--view .card-header,.bum-objective--view .card-header{
  border-bottom: 1px solid #E5E5E1;
}
.overall-view .card-body,.project-objective--view .card-body,.bum-objective--view .card-body{
  padding: 0 !important;
}
.overall-view .card-header,.project-objective--view .card-header{
  color: #000;
  font-size: 24px;
  line-height: 30px;
  font-family: 'Platform Bold',Arial;
  
}

.bum-objective--view .card-header{
  color: #000;
  font-size: 16px;
  line-height: 30px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;

  
}
.bum-objective--view.inner-pages .tm-names{
  width: 30%;
  
}
.bum-objective--view.inner-pages .card-header{
  padding-right: 15px !important;
  text-align: right;
}
.bum-objective--view.inner-pages .previous-months-by-teammembers--panel{
  
  width: 70%;
  margin-top: 0;
}
.previous-months-by-teammembers--panel{
  color: #EE4056;
  font-size: 12px;
  line-height: 16px; 
  margin-top: 20px;
}
.previous-months-by-teammembers--panel a{
  font-weight: 700;
  text-decoration: underline;
}
.card3.project-objective--view,.card3.bum-objective--view{
  margin: 20px 0;
}

.bum-objective--view .card-body,.project-objective--view .card-body,.overall-view .card-body{
  padding: 10px;
}

.project-objective--view{
  padding: 20px 0 !important;

}

.bum-objective--view{
  padding: 0px 0 20px 0 !important;  
}

.project-objective--view .card-header{
    padding: 0 120px 10px 20px !important;
    position: relative;
    line-height: 20px;
}
.bum-objective--view .card-header{
    padding: 10px 130px 10px 20px !important;
    position: relative;
    line-height: 20px;
    min-height: 70px;
    vertical-align: middle;
    display: flex;
/*    justify-content: center;*/
    align-items: center;

}
.project-objective--view .card-header span{
  position: absolute;
  right: 25px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-style: italic;
}
.bum-objective--view .card-header a.bum-view-details--btn,.bum-objective--view .card-header a.bum-view-details--btn:hover,.bum-objective--view .card-header a.bum-view-details--btn:focus{
  position: absolute;
  right: 25px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-style: italic;
  border: 1px solid #000;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 0 10px;
  text-decoration: none;
  top: 50%;
  margin-top: -11px;
}
.edit-business-target--btn,.edit-business-target--btn:hover,.edit-business-target--btn:focus,
.edit-bum-target--btn,.edit-bum-target--btn:hover,.edit-bum-target--btn:focus{
  text-decoration: none;
}

.project-objective--view .card-body,.bum-objective--view .card-body{
  padding: 20px !important;

}
.project-bum--view .forecast-payment--panel{
  margin-top: 40px;
}
.forecast-payment-label{
  color: #75716B;
  font-weight: bold;
}

.forecast-payment-no{
  color: #EFAC00;
  font-family: 'Platform Bold',Arial;
  font-size: 30px;
  line-height: 35px;
}

.forecast-invoiced-no{
  font-style: italic;
  font-size: 16px;
  color: #000;
  line-height: 18px;
  font-weight:  normal;
}

.forecast-monthly-figure--panel{
  background: #fff;
  border: 1px solid #E6E5E1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  color: #75716B;
  font-weight: bold;
  margin-top: 10px
}

.forecast-monthly-figure--panel strong{
  color: #000;
}
.forecast-monthly-figure--panel .forecast-invoiced-no{
  font-size: 14px;
}

.forecast-monthly-figure--panel .forecast-invoiced-no,.forecast-monthly-figure--panel .forecast-invoiced-no strong{
  color: #75716B ;
}
.forecast-objective-overall--panel{
  border: 1px solid #E6E5E1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 20px;
  margin-top: 20px;
}

.forecast-objective-overall--panel .forecast-monthly-figure--panel{
  border: none;
  background: none;
  border: none !important;
}

.project-objective--view .project-bum--view .forecast-monthly-figure--panel{
  background: #F5F5F5;
}
.project-objective--view .project-bum--view .forecast-payment-label{
  display: block;
}
.project-objective--view .project-bum--view .forecast-payment-no{
  display: inline-block;
/*  minwidth: 60%;*/
  font-size: 20px;
  line-height: 20px;
}
.project-objective--view .project-bum--view .forecast-invoiced-no{
  display: inline-block;
/*  width: 38%;*/
  font-size: 14px;
  line-height: 14px;
}
.overall-view .forecast-objective-overall--panel .forecast-invoiced-no{
  display: inline-block;

}

.project-objective--view .project-bum--view table{
  width: 100%;
}
.project-objective--view .project-bum--view table td{
  vertical-align: top;
  padding: 5px;
  text-align: left;
  line-height: 16px;
}

.project-objective--view .project-bum--view table td:first-child{
  width: 30%;

  
}
.project-objective--view .project-bum--view table .forecast-invoiced-no{

  display: block;
}





.project-objective--view .project-bum--view .row [class*=col-]:first-child .forecast-payment--panel{
  
  margin-top: 0;
}

.project-objective--view .forecast-monthly-figure--panel{
  background: none;
}
.project-bum--name{
  font-size: 20px;
  font-family: 'Platform Bold',Arial;
}

.project-bum--view .project-objective-total--view .forecast-monthly-figure--panel{
  border: 1px solid #C0BFBB;
  background: #fff;
}

.forecast-overdue-invoice--panel{
  color: #EE4056;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
  padding: 15px;
}
.forecast-overdue-invoice--panel .forecast-overdue-invoice-amt{
  font-weight: bold;
  font-style: normal;
}

.apply-this--btn,.apply-this--btn:hover,.apply-this--btn:active,.apply-this--btn:focus{
  color: #EFAC00;
  text-decoration: underline ;
  font-weight: 700;
}

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


.txt-with-star--panel{
  padding: 6px 0 0 30px;
  position: relative;
  font-size: 16px !important;
  font-weight: normal !important ;
}

.txt-with-star--panel i.icon-Others_Featured{
  position: absolute;
  left: 5px;
  color: #EFAC00;
}

.subtask--item.view .txt-with-star--panel{
  font-weight: 700 !important;
  font-size: 19px !important;
}

.subtask--item.view  .txt-with-star--panel i.icon-Others_Featured{
  left:0 ;
}

.lottie-popup{
  height: 120px; width: 200px; margin: 0 auto; text-align: center
}

.unpublish-client-update{
  display: inline-block;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #000000;
  -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: 16px;
  line-height: 24px;
  color: #000000;

  cursor: pointer;
  text-decoration: none !important;
}

.view-client-update--label{
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  text-decoration-line: underline;
  color: #FFFFFF;
}

.current-designation-label{
  color: #EFAC00;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
}

.previous-designation-label{
  color: #75716B;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0em;
}

.previous-designation-label.old-designation{
  text-decoration: line-through;
}

.resigned-label{
  color: #EE4056;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
}

.lottie-popup #lottie{
  margin: 0 auto
}

.lottie-popup .lottie-label{
  font-size: 14px;
  font-weight:  normal;
}

/* Styling for lottie loading animation begin */

.save-btn {
    display: inline-flex;
    align-items: center; /* Vertical alignment for content inside */
}

.general-loading-lottie--content {
    width: 50px;
    height: 50px;
    display: none;
}

/* Styling for lottie loading animation ends */

.project-progress--dropdown-menu{
/*  height: 500px;*/
/*  overflow-y: auto;*/
  border-radius:6px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  overflow:hidden;
}

.slider-option--container.disabled,
.slider-option--container.fake-disabled,
.project-progress--dropdown-menu input:disabled,
.project-progress--dropdown-menu input.fake-disabled{
  background: white !important;
  opacity: 0.6;
}

.dropdown-menu--body{
  padding: 0px 16px;
  margin: 16px 8px 16px 0px;
  height: 412px;
  overflow-y: auto;
}

.dropdown-menu--body hr{
  margin-top: 24px;
  margin-bottom: 24px;
}

.filtering-option--container .filtering-option--wrapper{
  display: grid;
  grid-gap: 24px;
}

.filtering-option--container .filtering-option--wrapper.two-column,
.slider-option--container.two-column{
  grid-template-columns: repeat(2, 1fr);
}

.filtering-option--container .filtering-option--wrapper .form-group{

}

.filtering-option--container .filtering-option--wrapper .filtering-option--listing{
    list-style: none;
    margin: 0;
    padding: 0;
}

.filtering-option--container .filtering-option--wrapper .filtering-option--listing li{
  padding:0 !important;
}

.filtering-option--container .filtering-option--wrapper .filtering-option--listing li label {
  opacity: 1;
  padding-left: 40px;
  margin-bottom: 8px;

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

.filtering-option--container .filtering-option--wrapper .input-ml-40{
  margin-left: 40px;
  width: calc(100% - 40px);
}

.filtering-option--container .filter--datepicker:disabled{
  opacity:0.2;
}

.filtering-option--wrapper .filter-switch{
  padding: 6px;
}

.filtering-option--wrapper .filter-switch-item label{
  font-family: 'DM Sans',sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #75716B;
  padding: 4px 8px;
}

.filtering-option--wrapper .filter-switch-item input:checked + label{
  color: #EFAC00;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.slider-option--container{
  display: grid;
}

.slider-option--container .slider-option--wrapper{
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}

.slider-option--wrapper a{
  text-decoration: none;
}

.slider-option--wrapper .input-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 40px;

  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}

.slider-option--wrapper .input-container label{
  height: 18px;
  width: 34px;
}

.slider-option--wrapper .input-container .dot-label{
  font-size: 40px;
  margin-right: 6px;
}

.slider-option--wrapper .input-container label:after {
    top: 1.5px;
    left: 2px;
    width: 15px;
    height: 15px;
}

.slider-option--wrapper .input-container label:active:after {
    width: 15px;
}

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

.dropdown-menu--footer{
  padding: 24px 16px;
  border-top: 1px solid #E6E5E1;
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
}

.dropdown-menu--footer .cta-container{
  display: flex;
  gap: 16px;
}

.dropdown-menu--footer .cta-container a{
  display: block;
  width: 100%;
  height: 100%;
}

.dropdown-menu--footer .cta-container .secondary-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  border: 1px solid #000000;
  -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: 16px;
  line-height: 24px;
  color: #000000;
  text-decoration: none !important;
}

.dropdown-menu--footer .cta-container .primary-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  background: #FFD200;
  -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: 16px;
  line-height: 24px;
  color: #000000;
  text-decoration: none !important;
}

.amount-input-leading--panel{
  position: relative;
}

.amount-input-leading--panel .leading-txt{
  position: absolute;
  left:10px;
  font-style: italic;
  font-size: 16px;
  top: 3px;
}

.form-group .amount-input-leading--panel input[type=text],.form-group .amount-input-leading--panel input[type=number]{
  text-align: right;
  padding-left: 40px !important;
}

.revenue-target-objective--listing li{
  display: inline-block;
  min-width: 150px;
  text-align: center;
}

.revenue-target-objective--listing li a{
  display: block;
  border-bottom:2px solid #fff;
}
.revenue-target-objective--listing li a:hover,.revenue-target-objective--listing li a:focus{
  text-decoration: none;
}
.revenue-target-objective--listing li a.active{
  text-decoration: none;
  border-bottom:2px solid #EFAC00;
  font-weight: 700;
}

.revenue-target--panel{
  display: none;
  
}

.filter-inline--btn{
  cursor: pointer;
  margin-right: 20px;
}

.filter-inline--btn:last-child{
  margin-right: 0px;
}

.filter-inline--btn .currentDate{
  font-weight: 700;
  color: #000;
}
.filter-inline--btn ul{
  cursor: default;
}

.filter-inline--btn a,.filter-inline--btn a:hover{
  text-decoration: none;
}
.filter-inline--btn .form-group{
  margin-bottom:0;
}

.filter-inline--btn .dropdown-menu{
  width: 350px;
  padding: 20px 20px;
  border-radius: 6px;
  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);

}
.filter-inline--btn.view-by-designation--btn .dropdown-menu{
  width: 400px;
}

.filter-inline--btn .dropdown-toggle2{
  color: #C0BFBB;
}

.filter-inline--btn .dropdown-toggle2.active{
  color: #EFAC00;
}


.month-target{
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.month-target strong{
  color: #75716B;
}
.target-gap--panel{
  border: 1px solid #E6E5E1;
  color: #75716B;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #F5F5F5;
  padding: 8px;
  width: 100%;
}
.target-gap--panel.stay-right{
  float: right;
}

.target-gap--panel .green{
  color: green;
  display: inline-block;
}

.target-gap--panel .red{
  color: red;
  display: inline-block;
}

.target-gap--panel img{
  display: inline-block;
  width: 20px !important;
}

.no-target-txt{
  font-style: italic; color: #75716B;width: 60px;  text-align: center; position: absolute; left: 50%; top: 50%; line-height: 14px; transform: translate(-50%, -50%);
  font-size: 12px;
}

/*forecast details*/
.forecast-project-listing{
  
}



.forecast-project-listing .forecast-project-header{
    background: #F5F5F5;
    border-bottom: 1px solid #E5E5E1;
    position: relative;
    padding: 10px;
}
.forecast-project-listing .forecast-project-header .forecast-project-toggle span{
  color: #75716B;
}

.forecast-project-listing .forecast-project-header.active .forecast-project-toggle span{
  color: #EFAC00;
}

.dropdown-toggle--evt.active .dropdown-toggle2{
  transform: rotate(0deg);  
  -webkit-transform: rotate(0deg);  
  -moz-transform: rotate(0deg); 
}
.forecast-project-listing ul{
  list-style: none;
  padding:0;
  display: none;
}
.forecast-project-listing ul li{
  border-bottom: 1px solid #E5E5E1;
  padding: 10px ;
}

.forecast-project-payment-status{
  padding-left: 20px;
  font-size: 12px
}

.forecast-project-payment-status .forecast-status{
  width: 8px;
  height: 8px;
  display: block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -4px;
}
.overdue-project--listing .forecast-status{
  background: #EE4056;
}
.upcoming-project--listing .forecast-status{
  background: #FFD200;
}
.invoiced-project--listing .forecast-status{
  background: #00B485;
}
.overdue-project--listing .forecast-project-payment-cost{
  color: #EE4056;
  font-weight: 700;
  font-size: 14px;
}
.upcoming-project--listing .forecast-project-payment-cost{
  color: #EFAC00;
  font-weight: 700;
}

.upcoming-project--listing .forecast-project-item--amt{
  color: #EFAC00;

}
.invoiced-project--listing .forecast-project-payment-cost{
  color: #00B485;
  font-weight: 700;
  
}

.forecast-project-toggle{
  position: absolute;
  right: 35px;
  top: 50%;
  margin: -15px 0 0 0;
}

.forecast-project-toggle.yellow-txt{
  color: #EFAC00;
}

.forecast-project-toggle span{

}

.forecast-project--item{
  position: relative;
  padding-right: 20px;
  
}
.forecast-project--item[data-link]{
  cursor: pointer;
}

.forecast-project--item .forecast-project-external--link{
  position: absolute;
  top: 50%;
  right: -5px;
  margin-top: -10px;
}

.forecast-project--item .forecast-project-item--name{
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.forecast-project--item .forecast-project-item--owner{
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400; 
  font-style: italic;
}

.forecast-project-item--duedate{
  color: #75716B;
  border: 1px solid #75716B;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  height: 24px;
  text-align: center;
  font-size: 12px;
}

.forecast-project-item--amt{
  font-size: 14px;
  text-align: center;
  font-weight: 700;
}

.overdue-project--listing .forecast-project-item--amt{
  color: #EE4056;
}

.overdue-project--listing .forecast-project-item--duedate{
  color: #EE4056;
  border: 1px solid #EE4056;
}

.invoiced-project--listing .forecast-project-item--duedate{
  color: #00B485;
  border: 1px solid #00B485;
}

.invoiced-project--listing .forecast-project-item--amt{
  color: #00B485;
}


.client--submit-button.disabled{
  opacity: 0.5;
  cursor: not-allowed;
}





/*modal with sticky side panel and scrolling div on the right*/
.modal-body.no-flex.overhidden{
  overflow: hidden;
  display: block;
}

.modal3{
/*  padding: 0 15px;*/
}
.modal3 .modal-sidepanel{
  position: absolute; 
  left: 15px;
  z-index: 2;
  width: 200px;
}

.modal3 .modal-scrolling-content{
  position: absolute; padding-left: 200px; overflow-y: auto; height: calc(100% - 15px); width: calc(100% - 15px)
}




/*project cost*/
.quotation-vo--listing{
  list-style: none;
  
  margin: 0;
  padding: 0;
}
.quotation-vo--listing li:last-child{
  margin-bottom: 20px;
}
.quotation-listing-panel{
  background: #F5F5F5;
  padding: 16px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.quotation-listing-panel .add-vo--btn,.quotation-listing-panel .add-vo--btn:hover{
  border: 1px dashed #C0BFBB;
  padding: 8px;
  display: block;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  font-style: italic;
}

.quotation-listing-panel .add-vo--btn i{
  position: relative;
  top: 1px;
  margin-right: 5px;
}


.quotation-section .remove-costing--btn,.variant-order-section .remove-costing--btn{
  font-weight: 700;
  color: #EE4056;
  font-size: 14px;
  text-decoration: underline;
}

.paymentTask--dropdown li a{
  font-weight: 400;
}
.payment-task--item{
  margin-bottom: 40px;
  padding-left: 40px !important;
  position: relative;
}

.payment-task--item.task-completed .payment-task--status{
  color: #00B485;
}
.payment-task--item.task-midway .payment-task--status{
  color: #F16321;
}

.payment-task--status{
  position: absolute;
  left: 10px;
  font-size: 20px;
}

.payment-task--total{
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
}


.payment-task--total.positive{
  color: #00B485;
}
.payment-task--total.negative{
  color: #EE4056;
}

.milestone-switch .completed-view{
  display: none;
  font-size: 16px;
  padding: 5px 0;
}

.disabled .milestone-switch .completed-view{
  display: block;
}
.disabled .milestone-switch .edit-view{
  display: none;
}

.current-payment-term .payment-type-display{
  
    display: none;
    opacity: 0.3;
}

.payment-type-display {
  background: #F5F5F5;
  border: 1px solid #E5E5E1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 8px;
  display: block
}

.variant-order-section,.quotation-section{
  display: none;
}

.variant-order-section.current,.quotation-section.current{
  display: block;
}
.variant-order-section .vo-item{
  display: none;
}

.variant-order-section .vo-item.current{
  display: block;
}

.current-payment-term .payment-type-edit{
  display: block;
}
.payment-type-edit{
  background: #FFFAE9;
  border: 1px solid #EFAC00;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 8px;
  display: none 
}


.payment-term--item{
  margin-top: 20px;
}

.all-payment-term-error{
  
}
.all-payment-term-error .payment-term--item .payment-type-display,.all-payment-term-error .payment-term--item .payment-type-edit{
  border: 1px solid red !important;
}

.change-payment-task--panel{
  position: absolute;
  width: 30px;
  height: 30px;
  right: 20px;
}

.change-payment-task--evt{
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  text-align: right;
  z-index: 10;
}

.dropdown-menu-bottom{
  top: auto;
  bottom: 0;
}

.dropdown-menu-right-bottom{
  top: auto;
  bottom: 0;
  left: auto;
  right: 0; 
}

.payment-term--item .form-group.has-error label{
  color: #313534;
}


/*.project-cost--widget .taskpdf--listing li{
  border: 1px solid #000 !important;
  -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    font-size: 14px;
    line-height: 18px;
    padding: 10px 10px 10px 40px;
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;

}*/
.project-cost--widget .selection.input-container{
  height: 35px;
}
.project-cost--widget .booking-fee-amt{
  display: none;
}

.project-cost--widget .booking-fee-amt.checked{
  display: block;
}
.project-cost--widget .booking-fee-amt{
  left: 30px;
}
.project-cost--widget .booking-fee-included,.project-cost--widget .booking-fee-included-none{
  color: #FFD200;
  font-style: italic;
  font-weight: 700;
  min-height: 30px;
}

.project-cost--widget .taskpdf--listing .taskpdf-uploaded{
  border: 1px solid #000;
}
.project-cost--widget .taskpdf--listing li i{
  position: absolute;
  color: #EFAC00;
  left: 16px;
}

.project-cost--widget .taskpdf--listing li div{
  font-weight: 700;
}

.project-cost--widget .default-img{
  width: 120px;
  margin: 20px 0 20px 0;
}


.form-group .notes-cent-group{
  position: relative;
}
.form-group .notes-cent-group .help-block{
  position: absolute;
  bottom: -15px;
}

.form-group .notes-cent-group input.form-control.currency-cents{
  width: 20%;
  display: inline-block;
  padding-left: 5% !important;
}

.form-group .notes-cent-group input.form-control.currency-notes{
  width: 50%;
  text-align: right;
  padding-left: 20px;
  display: inline-block;
}
.notes-cent-group span.currency{
  position: absolute;
  left: 10px;
  color: #75716B;
  font-size: 16px;
  top: 10px;

}
.notes-cent-group span.decimal{
  position: absolute;
  right: 46%;
  color: #75716B;
  font-size: 20px;
}


.double-confirmation--item p{
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 20px 40px;
}
.double-confirmation--item p span{
  color: #EE4056;

}



.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;
}

.generic-arrow-container{
  position:relative;
}


.generic-arrow-wrapper{
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.generic-arrow-wrapper i{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  line-height: 13px;
  display:inline-block;
  color:#EFAC00;
  transition: all 0.15s ease-in;
}

.collapsed .project-list--cost-vo-list{
  display:none;
}

.collapsed .generic-arrow-wrapper i{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  color:#000;
}

.project-card-cost-values span{
  width:90px;
  display:inline-block;
  font-weight:normal;
}


.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;
}

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

.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{
  margin-right:5px;
  font-size:18px;
  vertical-align: middle;
}

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

.task-drawer--taskupdate-tab.active{
  width:100%;
  display:inline-block;
  padding-bottom:5px;
/*  border-bottom:2px solid #EFAC00;*/
}

.task-drawer--taskupdate-tab.active:after{
  content:"";
  height:2px;
  width:100%;
  position:absolute;
  bottom:2px;
  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: 64px;
  height:64px;
  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;
}

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

.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;
}

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




.edit-completed-task--form .drag-drop--panel{
  width: calc(100% - 46px); 
  left: 24px;
  
}
.edit-push-client--form .drag-drop--panel,.edit-push-client-step2--form .drag-drop--panel{
  width: calc(100% - 46px); 
  left: 24px;
  
}

.drag-drop--panel{
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  display: none; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: #FFFAE9; 
  top: 0; 
  left: 0; 
  padding: 24px 24px; 
  z-index: 1001;
  border: 1px dashed #EFAC00;
  font-style: italic;
  color: #EFAC00;
  font-weight: 700;
  font-size: 14px;
}
.drag-drop--panel.showFlex{
    display: flex;
    align-items: center;
    justify-content: center;

}
.drag-drop--panel i{
    font-size: 24px;
    position: absolute;
    left: 0;
}

.drag-drop--txt{
    padding-left: 35px;
    position: relative;
}

.bulk-import-corps--upload{
  position:relative;
}

.corps-fileupload--panel{
  height: 200px; 
  border: 2px dashed #C0BFBB; 
  border-radius: 12px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer;
}

.corps-fileupload--panel input[type=file]{
  display: none;
}

.excel-uploaded{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  width:100%;
  height:100%;
  display:none;
}

.excel-uploaded>div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

.excel-uploaded>div p{
  margin-bottom:6px;
  font-size:18px;
  line-height:18px;
  font-weight:bold;
}

.excel-uploaded>div a{
  color: red;
  text-decoration: underline;
  font-weight: bold;
}

.excel-uploaded>div i{
  font-size: 40px;
  color: #EFAC00;
  margin-bottom: 10px;
  display: block;
}

#addBulkProject .modal-header{
  width: 100%;
  border-top: 0;
  border-bottom: 0;
  display: block;
}

#addBulkProject .grey-text{
  color:#75716B;
}

#addBulkProject .red-text{
    color:#EE4056;
}



.corps-fileupload--panel{
    color:#75716B;
    font-weight:bold;
}

.corps-fileupload--panel>div p{
  display:inline-block;
  margin:0;
  vertical-align: middle;
}

.corps-fileupload--panel span{
    padding-left:4px;
    font-weight:normal;
}

.corps-fileupload--panel.error{
  border:2px dotted red;
  display:flex;
  color:#75716B;
}

.bulk-bulk--template-link,
.bulk-bulk--template-link:hover,
.bulk-bulk--template-link:focus{
  color:#EFAC00;
  text-decoration:none;
}

.bulk-bulk--template-link:hover span{
    text-decoration:underline;
}

.bulk-bulk--template-link:hover i{
  text-decoration: none;
}

.bulk-bulk--template-link span{
  text-decoration: underline;
}

.bulk-import-corps--listing ul{
  padding-left:0; 
  max-height:260px;
  min-height:260px;
  overflow-y:scroll;
}

.bulk-import-corps--listing ul li{
  font-size:16px;
  color:#000;
  list-style-type: none;
}

.bulk-import-corps--listing .icon-triangle{
  display:inline-block;
  vertical-align: middle;
  padding-bottom:5px;
}

.bulk-import-corps--listing .icon-triangle i{
  font-size:22px;
  margin:0 5px 0 auto;
}

.bulk-import-corps--cta-container{
  padding-top:40px;
}

.bulk-import-corps--listing-exist-description h5{
  margin:0;
  color:#000;
}

.bulk-import-corps--yellowbox{
  font-style:italic;
  color:#75716B;
  background:#FFFAE9;
  border:1px solid #EFAC00;
  border-radius:5px;
  padding:10px 8px;
}

.bulk-import-corps--listing-no-exist p{
  margin-bottom:0px;
}

.bulk-import-corps--listing-exist .icon-triangle{
    float:left;
    width: auto;
    margin-right:5px;
}

.bulk-import-corps--listing-exist .icon-triangle i{
  font-size:18px;
}

.bulk-import-corps--listing-exist-description {
  float:left;
  width: 75%;
  padding-top:3px;
  line-height:20px;
}

.bulk-import-corps--steps--footer{
  padding-bottom:20px;  
}

.bulk-import-corps--back-btn{
    margin-right:20px;
    color:#000;
    font-weight:bold;
}

.bulk-import-corps--back-btn:hover{
  color:#000;
}

.bulk-import-corps--back-btn span{
    padding-left:5px;
}

.bulk-import-corps--steps,
.bulk-import-corps--listing-exist,
.bulk-import-corps--listing-no-exist{
    display:none;
}

.bulk-import-corps--steps[data-step="1"]{
    display:block;
}

.bulk-import-corps--processing{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display:none;
}

.list-project--page .btn[data-target="#addProject"] strong,
.list-project--page .btn[data-target="#addBulkProject"] strong{
  display:inline-block;
  vertical-align: middle;
  line-height:36px;
}

.list-project--page .btn[data-target="#addProject"]:focus,
.list-project--page .btn[data-target="#addBulkProject"]:focus{
  color:#000;
}

.list-project--page .create-project-add-icon{
  display:inline-block;
  vertical-align: middle;
  width:15px;
  margin-right:5px;
}
/* update project info ux */
.bum-date-delay--btn{
  background: #FFD200;
  border-color: #FFD200;
}

label.delay-label--item{
  font-weight: bold !important;
  line-height: 30px;
  margin-bottom: 0;
}

label.delay-label--item .radiomark{
  margin-top: 5px;
}

.delay-label--row  input[type=text]{
  font-weight: bold ;
  width: 50px;
  font-size: 14px;
  line-height: 30px;
}

.delay-label--row{
  line-height: 30px;
}

.vendor--thumbnail{
  
  padding-top: 88px;
  /*border: 1.5px dashed #C0BFBB; */
  /*.75em solid*/
  border: 2px dashed #C0BFBB; 
  border-radius: 100%;
  position: relative;
/*  overflow: hidden;*/
  height: 88px;
  width: 88px;
}

.vendor--thumbnail label{
  cursor: pointer;
  /*top: 50%;
  left: 50%;*/
  font-size: 26px;
  /*margin: -15px 0 0 -15px;*/
  display: block;/*
  background: green;*/
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  top: 0;
}
.vendor--thumbnail i{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  margin: -15px 0 0 -15px;
  color: #75716B;
}



.vendor--thumbnail.upload-parent span:not(.progress){
    border-radius: 100%;
}
.vendor--thumbnail.uploaded span:not(.progress){
    border-radius: 100%;   
    border: 1px solid black;
}

.vendor--thumbnail.uploaded{
    border: none;
}
.vendor--thumbnail.uploaded label{
  /*width: 50px;
  height: 50px;*/
  width: 36px;
  height: 36px;
  position: absolute;
  top: 0;
  background-color: #383633;
  right: 0;
  color: #75716B;
  border: 1px solid #75716B;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  top: auto;
  bottom: -10px;
  right: -10px;
  text-align: center;
}

.vendor--thumbnail.uploaded label i{
  font-size: 20px;
  font-size: 20px;
  margin: -10px 0 0 -10px;
  color: #FFD200;
}







/*vendor page*/
.vendor-table thead>tr>th{
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #75716B;
}
.add-vendor--panel{
    position: relative;  background: #E5E5E5; padding: 20px 40px 0 0px; border: 1px solid #C0BFBB; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
}
.add-vendor--panel .cancel-new-owner--btn{
    position: absolute;
    right: -25px;
}




.edit-link,.edit-link:focus,.edit-link:hover{
  color: #EFAC00;
  text-decoration: none;
}

.delete-link,.delete-link:focus,.delete-link:hover{
    color: #EE4056;
    text-decoration: none;
}

.vendors-table-listing .edit-link,.vendors-table-listing .delete-link{
    font-size: 20px;
    margin: 0 10px;
}

.vendors-table-listing .status-link{
    cursor: default;
    line-height: 26px;
    min-height: 20px;
    font-size: 14px;
    text-transform: none;
}

.status-link.inactive{
    
    border-radius: 20px;
    background: #FCDEDF;
    color: #EE4056;
    font-weight: bold;
}
.status-link.active{
    color: #00B485;
    background: #E6F3E2;
    border-radius: 20px;
    font-weight: bold;
}




/*performance*/
.vendor-performance-card{
    border-radius: 12px;
    border: 1px solid #e5e5e1;
    position: relative;
}
.vendor-performance-card--header{
    padding: 15px 0 10px 0;
    border-bottom: 1px solid #e5e5e1;
    display: flex;
    align-items: center;


}

.vendor-performance-card--avatar{
    display: inline-flex;
    /*position: absolute;
    left: 10px;
    top: 20px;*/
    width: 15%;
    text-align: center;
    padding-left: 10px;
    


}

.vendor-performance-card--name{
    line-height: 16px;
    width: 70%;
    display: inline-flex;
    
}
.vendor-performance-card--action{
    /*position: absolute;
    right: 10px;
    top: 20px;*/
    display: inline-flex;
    width: 10%;
    padding-right: 10px;

}
.vendor-performance-card--content{
    padding: 10px;
}
.scale-rate--item{
    clear: both;
}

.scale-rate--label{
    float: left;
    width: 75%;
}
.scale-rate--no{
    float: left;
    width: 25%;
    text-align: center;
}

.late-response--txt{
    line-height: 16px;
}

.drag-drop--panel{
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  display: none; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: #FFFAE9; 
  top: 0; 
  left: 0; 
  padding: 24px 24px; 
  z-index: 1001;
  border: 1px dashed #EFAC00;
  font-style: italic;
  color: #EFAC00;
  font-weight: 700;
  font-size: 14px;
}
.drag-drop--panel.showFlex{
    display: flex;
    align-items: center;
    justify-content: center;

}
.drag-drop--panel i{
    font-size: 24px;
    position: absolute;
    left: 0;
}

.drag-drop--txt{
    padding-left: 35px;
    position: relative;
}

.title-area-3{
    font-family: 'Platform Bold';
    font-style: normal;
    font-weight: 700;
    margin-bottom: 24px;
}
.vendor-popup--title{
    margin-bottom: 24px !important;
}

.searchFilter--form{
    position: relative;
}
.searchFilter--form .search-close--btn,.searchFilter--form .search-close--btn:hover {
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
}
.workplace-search--panel{
    position: relative;
}
.workplace-search--panel .search-close--btn,.workplace-search--panel .search-close--btn:hover{
    padding: 0 !important; 
    margin: 0 !important; 
    right: 0; 
    position: absolute;
    top: 5px;
    display: none;
    text-decoration: none;
}


.service-offer--container{
    width:100%;
    padding-left:25px
}