/**
 * This file is part of the Meeds project (https://meeds.io/).
 * Copyright (C) 2022 Meeds Association
 * contact@meeds.io
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
@import "variables.less";
@import "mixins.less";

@taskCardMaxHeight: 230px;
@taskCardParentMargin: 22px;
@taskCardParentMaxHeight: @taskCardParentMargin + @taskCardMaxHeight;

/*----------------------Tasks Management ---------------------*/

.addProjectDrawer {
  hr.my-0.v-divider.theme--light{
    margin-top: 5px!important;
  }
  .drawerContent {
    padding: 0 16px 0 16px;
    .addProjectTitle {
      .uiIconProject {
        .fa();
        .fa-folder();
        font-style: normal;
        font-size: 20px;
        color: @primaryColor;
        margin-right: 4px ~'; /** orientation=lt */ ';
        margin-left: 4px ~'; /** orientation=rt */ ';
        margin-top: -4px;
      }
      .projectInputTitle {
        margin-bottom:0px;
        border: none!important;
        padding: 3px 6px!important;
        width: 100%!important;
        font-size: 16px;
        color: @textColor!important;
        &::placeholder {
          font-size: 16px!important;
        }
        &:before {
          display: none;
        }
        &:after{
          border: Solid 1px @borderColor!important;
          border-radius: 5px!important;
        }
        &:focus {
          box-shadow: none!important;
        }
        .v-input__slot {
          label {
            color: @greyColorLighten1;
            letter-spacing: .2px;
          }
          .v-text-field__slot{
            margin-left: 5px ~'; /** orientation=lt */ ';
            margin-right: 5px ~'; /** orientation=rt */ ';
          }
        }
      }
    }
  .projectLabelsName {
    .inputProjectLabel{
      box-shadow: none!important;
      border: none!important;
      padding-top: 20px !important;
      .v-input__prepend-outer {
        margin-top: 8px;
        i {
          color: @primaryColor;
          font-size: 18px;
        }
      }
      .v-input__control {
        min-height: 38px!important;
        > .v-input__slot {
          box-shadow: none!important;
          padding: 0!important;
          margin-bottom: 0!important;
          .v-select__slot {
            .v-select__selections {
              max-width: 100%!important;
              .labelsActionMenu {
                .v-sheet {
                  background-color: @lightWhite!important;
                  .labels-edit-name {
                    padding-top: 8px;
                    .v-input__control {
                      .v-text-field__slot {
                        padding-left: 8px;
                      }
                      .v-input__append-inner {
                        display: flex;
                        margin-top: 0!important;
                        margin-right: 8px;
                      }
                    }
                  }

                }
              }
            }
            label {
              color: @greyColorLighten1;
            }
          }
        }
        .v-input__append-inner {
          display: none;
        }
      }
    }
  }
    .projectPermissionsUsers {
      .permisionLabel {
        color: @textLightColor;
      }
      .listOfManager,.listOfParticipant {

        .listOfParticipantavatar{
          margin-right: -2px ~'!important; /** orientation=lt */ ';
          margin-left: -2px ~'!important; /** orientation=rt */ ';
        }
        .listOfManageravatar{
          a.flex-nowrap.flex-shrink-0.d-flex {
            margin-right: 17px ~'; /** orientation=lt */ ';
            margin-left: 17px ~'; /** orientation=rt */ ';
          }
        }
        .listOfParticipantavatar{
          a.flex-nowrap.flex-shrink-0.d-flex {
            margin-right: 10px ~'; /** orientation=lt */ ';
            margin-left: 10px ~'; /** orientation=rt */ ';
          }
          .seeMoreAvatars{
            margin-right: 7px ~'; /** orientation=lt */ ';
            margin-left: 7px ~'; /** orientation=rt */ ';
          }
        }

        .listOfManageravatar,.listOfParticipantavatar{
          float: left ~'; /** orientation=lt */ ';
          float: right ~'; /** orientation=rt */ ';
          display: flex;
          margin-right: 5px ~'; /** orientation=lt */ ';
          margin-left: 5px ~'; /** orientation=rt */ ';
          .seeMoreAvatars {
            .seeMoreItem {
              position: relative;
              margin-top: 5px;
              &:before {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                background: @baseColorMedium;
                border-radius: 50%;
                opacity: .5;
                z-index: 1;
              }
              .v-avatar{
                height: 30px!important;
                min-width: 30px!important;
                width: 30px!important;
              }
              .seeMoreAvatarList {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                text-align: center;
                width: 30px;
                height: 30px;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 15px;
                font-weight: bold;
                z-index: 1;
              }
            }
          }
        }
        a.flex-nowrap.flex-shrink-0.d-flex {
          .v-avatar.pull-left.my-auto {
            height: 30px;
            min-width: 30px;
            width: 30px;
          }
          .peopleInfoIcon {
            z-index: 9999;
            background: #fff;
            height: 19px;
            width: 19px;
            margin-top: 23px;
            margin-left: -13px ~'!important; /** orientation=lt */ ';
            margin-right: -14px ~'!important; /** orientation=lt */ ';
            margin-right: -13px ~'!important; /** orientation=rt */ ';
            margin-left: -14px ~'!important; /** orientation=rt */ ';
          }
        }
        .editManager,.editParticipant {
          margin-left: 10px ~'; /** orientation=lt */ ';
          margin-right: 10px ~'; /** orientation=rt */ ';
          margin-top: 10px;
          a.editManager,a.editParticipant {
            text-decoration: underline;
            i.fas.fa-pencil-alt.uiIconProject,i.fas.fa-plus {
              text-decoration: underline;
              font-size: 11px;
            }
          }
          .v-select__selections{
            min-height: 30px!important;
          }
          label.editManagerInfo,label.editParticipantInfo {
            font-size: 10px;
            color: @textLightColor;
            font-style: italic;
            margin-right: 30px ~'; /** orientation=rt */ ';
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            i.uiIconInformation.uiIconProject {
              .fa();
              .fa-info-circle();
              font-size: 11px;
              color: @textLightColor;
            }
          }
        }
      }
    }

    .cke_bottom.cke_reset_all {
      background-color: transparent;
      height: 30px;
    }
    .cke_bottom .cke_button_icon {
      filter: opacity(0.4);
    }
    .projectDescription {
      label {
        font-size: 1rem !important;
        font-weight: 400;
        letter-spacing: 0.03125em !important;
        line-height: 1.5rem;
        color: @textLightColor!important;
      }
    }
  }
}
.filterLabelsTasksDrawer{
  margin-top: 25px;
  .inputTaskLabel{
    box-shadow: none!important;
    border: none!important;
    .v-select__selections {
      max-width: 100% !important;
      span.pr-1.v-chip.v-chip--label.theme--light.v-size--small.null.lighten-3.v-chip--select{
        border-radius: 14px !important;
        button.v-icon.notranslate.pr-0.v-icon--link.material-icons.theme--light{
          border-radius: 40px;
          height: 14px;
          padding-left: 0px ~'; /** orientation=lt */ ';
          padding-right: 0px ~'; /** orientation=rt */ ';
        }
      }
    }
    .v-input__control {
      > .v-input__slot {
        border: Solid 1px var(--allPagesInputFocusBorder, #a6bad6)!important;
        box-shadow: none!important;
        .v-select__slot {
          label {
            color: @greyColorLighten1;
          }
        }
      }
      .v-input__append-inner {
        display: none;
      }
    }
  }
}
.filterTasksDrawer {
  .filterGroupTasksDrawer,.filterSortTasksDrawer{
    form.mt-4{
      margin-left: 9px ~'; /** orientation=lt */ ';
      margin-right: 9px ~'; /** orientation=rt */ ';
    }
    .v-input--radio-group--column{
      margin-left: 9px ~'; /** orientation=lt */ ';
      margin-right: 9px ~'; /** orientation=rt */ ';
    }
  }
  hr.my-0.v-divider.theme--light{
    margin-left: -20px ~'; /** orientation=lt */ ';
    padding-left: 20px ~'; /** orientation=lt */ ';
    margin-right: -20px ~'; /** orientation=rt */ ';
    padding-right: 20px ~'; /** orientation=rt */ ';
    width: 400px;
  }
  .v-navigation-drawer__content{
    padding-left: 20px ~'; /** orientation=lt */ ';
    padding-right: 20px ~'; /** orientation=rt */ ';
    /* switch */
    .switch {
      position: relative;
      display: inline-block;
      width: 53px;
      height: 32px;
      top: 0.4rem;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      overflow: hidden;
      top: 5px;
      left: 0;
      right: 0;
      bottom: 0;
      width: 60px;
      height: 20px;
      background-color: #f2f2f2;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      z-index: 2;
      content: "";
      height: 14px;
      width: 14px;
      left: 5px ~'; /** orientation=lt */ ';
      right: 5px ~'; /** orientation=rt */ ';
      bottom: 3px;
      background-color: darkgrey;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
      -webkit-transition: .4s;
      transition: all 0.4s ease-in-out;
    }

    .slider:after {
      position: absolute;
      left: -20px ~'; /** orientation=lt */ ';
      right: -20px ~'; /** orientation=rt */ ';
      z-index: 1;
      content: "";
      font-size: 13px;
      text-align: start !important;
      line-height: 19px;
      padding-left: 0 ~'; /** orientation=lt */ ';
      padding-right: 0 ~'; /** orientation=rt */ ';
      width: 95px;
      height: 26px !important;
      color: #f9f9f9;
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff578dc9', endColorstr='#ff2f5e92', GradientType=0);
      -moz-box-shadow: inset 0px 3px 5px #224469;
      -webkit-border-top-left-radius: 9px ~'; /** orientation=lt */ ';
      -webkit-border-top-right-radius: 9px ~'; /** orientation=rt */ ';
      -moz-border-radius-topleft: 9px;
      border-top-left-radius: 9px;
      -webkit-border-bottom-left-radius: 9px;
      -moz-border-radius-bottomleft: 9px;
      border-bottom-left-radius: 9px ~'; /** orientation=lt */ ';
      border-bottom-right-radius: 9px ~'; /** orientation=rt */ ';
      height: 57px;
      border-radius: 100px;
      background-color: @primaryColor;
      -webkit-transform: translateX(-190px);
      -ms-transform: translateX(-190px);
      transform: translateX(-190px);
      transition: all 0.4s ease-in-out;
    }

    input:checked + .slider:after {
      -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px);
      padding-left: 25px ~'; /** orientation=lt */ ';
      padding-right: 25px ~'; /** orientation=rt */ ';
    }

    input:checked + .slider:before {
      background-color: #fff;
      -webkit-transform: translateX(38px);
      -ms-transform: translateX(38px);
      transform: translateX(38px);
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(38px);
      -ms-transform: translateX(38px);
      transform: translateX(38px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 100px;
    }

    .slider.round:before {
      border-radius: 50%;
    }

    .absolute-no {
      position: absolute;
      left: 27px ~'; /** orientation=lt */ ';
      right: 27px ~'; /** orientation=rt */ ';
      color: DarkGrey;
      text-align: end !important;
      font-size: 16px;
      width: calc(100% - 25px);
      line-height: 30px;
      cursor: pointer;
    }

    input:not(:checked) + .slider > .absolute-yes {
      z-index: -1;
      position: absolute;
      -webkit-transform: translateX(-190px);
      -ms-transform: translateX(-190px);
      transform: translateX(-190px);
      left: 2px ~'; /** orientation=lt */ ';
      right: 2px ~'; /** orientation=rt */ ';
      color: white;
      text-align: end;
      font-size: 16px;
      width: calc(100% - 25px);
      line-height: 22px;
      cursor: pointer;
      transition: all 0.4s ease-in-out;
    }

    input:checked + .slider > .absolute-yes {
      -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px);
      z-index: 15;
      position: absolute;
      left: 2px ~'; /** orientation=lt */ ';
      right: 2px ~'; /** orientation=rt */ ';
      color: white;
      text-align: end;
      font-size: 16px;
      width: calc(100% - 25px);
      line-height: 22px;
      cursor: pointer;
      transition: all 0.4s ease-in-out;
      padding-right: 10px ~'; /** orientation=lt */ ';
      padding-left: 10px ~'; /** orientation=rt */ ';
    }

    .absolute-no {
      position: absolute;
      left: 27px ~'; /** orientation=lt */ ';
      right: 27px ~'; /** orientation=rt */ ';
      color: DarkGrey;
      text-align: end !important;
      font-size: 16px;
      width: auto;
      line-height: 30px;
      cursor: pointer;
    }

    form.switchEnabled {
      display: inline-flex;
      margin: 20px 5px;
    }

    form.switchEnabled label.switch {
      margin-left: 21px ~'; /** orientation=lt */ ';
      margin-right: 21px ~'; /** orientation=rt */ ';
      margin-top: -7px;
    }
    .flex.drawerContent.flex-grow-1.overflow-auto.border-box-sizing{
      padding-right: 20px ~'; /** orientation=lt */ ';
      padding-left: 20px ~'; /** orientation=rt */ ';
    }
    button.reset.v-btn.v-btn--contained.theme--light.v-size--default{
      cursor: pointer!important;
      color: @primaryColor!important;
      box-shadow: 0 0 #FFFFFE!important;
      background-color: #FFFFFF!important;
      padding: 0px;
      margin: 0px;
      margin-left: -16px ~'; /** orientation=lt */ ';
      margin-right: -16px ~'; /** orientation=rt */ ';
    }
    .reset{
      i.fas.fa-redo{
        font-size: 11px;
        margin-right: 5px ~'; /** orientation=lt */ ';
        margin-left: 5px ~'; /** orientation=rt */ ';
      }
    }
  }
  .input-block-level {
    min-height: 40px!important;
  }
  .identitySuggester{
    height: 37px;
  }
}

.tasksMenuParent {
  margin-bottom: 10px;
}
.taskFilter.v-card.v-sheet.theme--light{
  box-shadow: none!important;
  header.v-sheet.theme--light.v-toolbar {
    box-shadow: none!important;
  }
}

#tasksListApplication {
  min-height: calc(~"100vh - 200px");
}
.projectAndTasksContainer {
  .nameGroup {
    font-size: 18px;
    font-weight: normal;
    margin-right: 8px ~'; /** orientation=lt */ ';
    margin-left: 8px ~'; /** orientation=rt */ ';
  }
  hr.my-0.v-divider.theme--light {
    margin-left: 5px;
    margin-right: 5px;
   }
  .uiIconSocSimplePlus {
    font-size: 16px;
    margin-top: -3px;
    color:@greyColorLighten1!important;
  }
  .uiIconSocSimplePlus:hover {
    color:@primaryColor!important;
    cursor: pointer;
  }
  i.uiIcon.uiIconMiniArrowDown,i.uiIcon.uiIconMiniArrowRight{
    margin-right: 8px ~'; /** orientation=lt */ ';
    margin-left: 8px ~'; /** orientation=rt */ ';
    font-size: 13px;
  }
  .uiIconMiniArrowDown:before,.uiIconMiniArrowRight:before{
    color:DarkGrey;
  }
  .assigneeFilter{
    margin-left: 10px ~'; /** orientation=lt */ ';
    margin-right: 10px ~'; /** orientation=rt */ ';
    margin-block-end: 5px;
    .defaultAvatar
    img {
      height: 26px;
      min-width: 26px;
      width: 26px;
      align-items: center;
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      line-height: normal;
      position: relative;
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
      margin-right: 8px ~'; /** orientation=lt */ ';
      margin-left: 8px ~'; /** orientation=rt */ ';
    }
    .text-truncate{
      font-size: 18px!important;
    }
  }
  .view-task-group-sort{
    margin-left: 28px ~'; /** orientation=lt */ ';
    margin-right: 28px ~'; /** orientation=rt */ ';
    display: block
  }
  .view-project-group-sort{
    margin-left: 19px ~'; /** orientation=lt */ ';
    margin-right: 19px ~'; /** orientation=rt */ ';
    display: block
  }
  .tasksToolbar {
    .inputTasksFilter {
      max-width: 250px;
      .v-input__slot {
        margin-bottom: 0!important;
        .v-text-field__slot {
          input {
            max-height: 22px!important;
          }
        }
      }
      .v-input__append-inner {
        button.mdi-close {
          font-size: 18px;
          margin-top: 14px;
        }
      }
    }
    .taskFilterMobile {
      color: @greyColorLighten1!important;
      font-size: 16px!important;
      margin-left: 12px ~'; /** orientation=lt */ ';
      margin-right: 12px ~'; /** orientation=rt */ ';
      display: none;
    }
    .inputTasksFilterMobile {
      display: flex!important;
      width: 90%;
      max-width: 90%;
      position: absolute;
      top: 50px;
      .v-input__append-outer {
        margin-left: -25px ~'!important; /** orientation=lt */ ';
        margin-right: -25px ~'!important; /** orientation=rt */ ';
      }
    }
    .tasksFilterMobile {
      display: none!important;
    }
    .selectPrimaryFilter {
      width: auto;
      height: 38px;
      color: @greyColorLighten1;
      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    #widthTmpSelectTaskFilter {
      display:none;
      visibility:hidden;
      width: inherit!important;
    }

    .selectTasksFilter {
      height: 40px;
      width: auto;
      padding-right: 20px ~'; /** orientation=lt */ ';
      padding-left: 20px ~'; /** orientation=rt */ ';
      &:focus {
        outline: none;
        box-shadow: none;
      }
    }
    .taskDisplay {
      .uiIcon {
        font-style: normal;
        font-size: 16px;
        padding-right: 10px ~'; /** orientation=lt */ ';
        padding-left: 10px ~'; /** orientation=rt */ ';
      }
      .uiIconCards {
        .far();
        .fa-clipboard();
      }
      .uiIconList {
        .fas();
        .fa-list();
      }
    }
    .v-tabs-slider-wrapper {
      display: none;
    }
    .taskTabCards {
      border: 1px solid @borderColor;
      border-radius: 5px 0 0 5px;
      height: 38px;
      min-height: 38px;
    }
    .taskTabList {
      border: 1px solid @borderColor;
      border-radius: 0 5px 5px 0;
      height: 38px;
      min-height: 38px;
    }
    .v-tab.v-tab--active {
      border: 1px solid @primaryColor!important;
      background-color: @tabNormalLinkBackground!important;
    }
    .filterTasksSetting {
      .uiIconFilterSetting {
        .fa();
        .fa-sliders-h();
        font-style: normal;
        font-size: 16px;
        color: @primaryColor;
      }
    }
  }
  .tasksListContainer {
    .projectItem {
      position: relative;
      .taskCardFlip {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
        min-height: @taskCardParentMaxHeight;
        padding: 0;
        .taskCardFront {
          z-index: 2;
          transform: rotateY(0deg);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          position: absolute;
          top: 0;
          left: 0 ~'; /** orientation=lt */ ';
          right: 0 ~'; /** orientation=rt */ ';
          height: @taskCardMaxHeight;
          max-height: @taskCardMaxHeight;
          width: 100%;
          max-width: 100%;
          .asparagus_border_bottom {
            border-bottom-color: #909958 !important;
          }
          .laurel_green_border_bottom {
            border-bottom-color: #BED67E !important;
          }
          .moss_green_border_bottom {
            border-bottom-color: #98CC81 !important;
          }
          .munsell_blue_border_bottom {
            border-bottom-color: #319AB3 !important;
          }
          .sky_blue_border_bottom {
            border-bottom-color: #4DBED9 !important;
          }
          .powder_blue_border_bottom {
            border-bottom-color: #9EE4F5 !important;
          }
          .baby_blue_border_bottom {
            border-bottom-color: #B2E2FF !important;
          }
          .navy_blue_border_bottom {
            border-bottom-color: #4273C8 !important;
          }
          .blue_gray_border_bottom {
            border-bottom-color: #8EB0EA !important;
          }
          .light_blue_border_bottom {
            border-bottom-color: #B3CFFF !important;
          }
          .light_gray_border_bottom {
            border-bottom-color: #CDCDCD !important;
          }
          .purple_border_bottom {
            border-bottom-color: #774EA9 !important;
          }
          .light_purple_border_bottom {
            border-bottom-color: #BC99E7 !important;
          }
          .pink_border_bottom {
            border-bottom-color: #FFC8F0 !important;
          }
          .beige_border_bottom {
            border-bottom-color: #FFE1BE !important;
          }
          .hot_pink_border_bottom {
            border-bottom-color: #F97575 !important;
          }
          .light_brown_border_bottom {
            border-bottom-color: #C5B294 !important;
          }
          .gray_border_bottom {
            border-bottom-color: #A39594 !important;
          }
          .plum_border_bottom {
            border-bottom-color: #CEA6AC !important;
          }
          .Orange_border_bottom {
            border-bottom-color: #FFA500 !important;
          }
          .green_border_bottom {
            border-bottom-color: #4CAF50 !important;
          }
          .red_border_bottom {
            border-bottom-color: #F44336 !important;
          }
          .yellow_border_bottom {
            border-bottom-color: #ffeb3b !important;
          }
          .brown_border_bottom {
            border-bottom-color: #795548 !important;
          }
          .tasksCardItem {
            height: @taskCardMaxHeight;
            max-height: @taskCardMaxHeight;
            flex-direction: column;
            border: 1px solid @borderColor;
            background-color: transparent!important;
            border-bottom-width: 5px;
            border-bottom-style: solid;
            .taskItemToolbar {
              background-color: transparent !important;
              i {
                color: @greyColorLighten1!important;
              }
              .projectCardTitle {
                color: @textColor!important;
                padding-left: 8px ~'; /** orientation=lt */ ';
                padding-right: 8px ~'; /** orientation=rt */ ';
              }
              .uiIconInformation {
                font-size: 20px;
                margin-top: -3px;
              }
              .uiIconVerticalDots {
                font-size: 16px;
                margin-top: -3px;
              }
              .projectCardTitle {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 75%;
                width: 75%;
                cursor: pointer;
              }
            }
            .noProjectColor {
              background: @lightGrey;
              .toolbarNoColor {
                color: @baseColorLight;
              }
            }
            .taskItemInfo {
              padding: 8px!important;
              .taskItemDescription {
                min-height: 70px;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                max-height: 50%;
                cursor: pointer;
                p {
                  margin-bottom: 0;
                  color: @borderColorLight;
                }
                .noProjectDescription {
                  color: @borderColorLight;
                  font-size: @textFontSize;
                }
              }
              .largeDescriptionArea {
                margin-bottom: 0!important;
              }
              .ProjectSpace {
                .v-list-item {
                  min-height: 38px!important;
                  .noSpaceProjectIcon {
                    height: 28px;
                    min-width: 28px;
                    width: 28px;
                    background: @greyColor;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  .noSpaceLabel {
                    color: @greyColorLighten1;
                  }
                }
              }
            }
            .SpaceAdmin {
              position: absolute;
              bottom: 0;
              width: 100%;
              padding: 0 10px;
              .v-list-item {
                min-height: 38px!important;
              }
              .spaceAdminWrapper {
                position: relative;
                z-index: 2;
                .managerAvatarsList {
                  .seeMoreAvatars {
                    .seeMoreItem {
                      position: relative;
                      &:before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        background: @baseColorMedium;
                        border-radius: 50%;
                        opacity: .5;
                        z-index: 1;
                      }
                      .seeMoreAvatarList {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        text-align: center;
                        width: 30px;
                        height: 30px;
                        color: white;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        font-size: 15px;
                        font-weight: bold;
                        z-index: 1;
                      }
                    }
                  }
                }
                .AllManagerAvatar {
                  box-shadow: 0 0 2px 1px @greyColor;
                  border-radius: 25px;
                  z-index: 1;
                  background: white;
                  .uiIconArrowBack {
                    font-size: 12px;
                    padding-top: 6px;
                    padding-left: 4px ~'; /** orientation=lt */ ';
                    padding-right: 4px ~'; /** orientation=rt */ ';
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
        .tasksCardBack {
          transform: rotateY(180deg);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          position: absolute;
          top: 0;
          left: 0 ~'; /** orientation=lt */ ';
          right: 0 ~'; /** orientation=rt */ ';
          height: @taskCardMaxHeight;
          max-height: @taskCardMaxHeight;
          width: 100%;
          max-width: 100%;
          .tasksCardItem {
            height: @taskCardMaxHeight;
            max-height: @taskCardMaxHeight;
            flex-direction: column;
            border: 1px solid @borderColor;
            position: relative;
            background-color: transparent!important;
            border-bottom-width: 5px!important;
            border-bottom-style: solid;
            .projectDetailsReverse {
              position: relative;
              .reverseInfoIcon {
                position: absolute;
                top: 12px;
                color: @greyColorLighten1;
                font-size: 20px;
              }
            }
            .noTasksProject {
              height: 80%;
              text-align: center;
              padding-top: 50px;
              padding-bottom: 24px;

              .noTasksProjectIcon {
                .uiIconTask {
                  color: @greyColor;
                  font-size: 40px;
                  padding-bottom: 10px;
                }
              }
            }
            .echartStatsContent {
              justify-content: space-evenly;
              .echartAndLabel {
                position: relative;
                .projectTasksTotalNumber {
                  position: absolute;
                  left: 60px ~'; /** orientation=lt */ ';
                  right: 60px ~'; /** orientation=rt */ ';
                  top: 35%;
                  span {
                    display: block;
                    text-align: center;
                  }
                  .totalNumber {
                    font-size: 1.5rem;
                  }
                }
              }
              .projectStatusNumber{
                width: 40%;
                p {
                  position: relative;
                  &:before {
                    position: absolute;
                    content: '';
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    margin-left: -15px ~'; /** orientation=lt */ ';
                    margin-right: -15px ~'; /** orientation=rt */ ';
                    top: 5px;
                  }
                }
                .blueLabel {
                  &:before {
                    background: @infoColor;
                  }
                }
                .yellowLabel {
                  &:before {
                    background: @warningColor;
                  }
                }
                .redLabel {
                  &:before {
                    background: @errorColor;
                  }
                }
                .greenLabel {
                  &:before {
                    background: @successColor;
                  }
                }
                .purpleLabel {
                  &:before {
                    background: #9834eb;
                  }
                }                                         
                .grayLabel {
                  &:before {
                    background: @baseColorMedium;
                  }
                }                     
              }
            }
          }
        }
      }
      .taskCardFlipped {
        transform: rotateY(180deg);
      }
      .projectActionMenu {
        right: 27px ~'; /** orientation=lt */ ';
        left: 27px ~'; /** orientation=rt */ ';
        left: auto ~'!important; /** orientation=lt */ ';
        right: auto ~'!important; /** orientation=rt */ ';
        top: 45px!important;
        .VuetifyApp .theme--light.v-list-item:hover::before {
          opacity: 0;
          .uiIcon,span {
            color: #ffffff!important;
          }
          background-image: linear-gradient(to bottom, @primaryColor, @primaryColor);
        }
        .v-list-item.menu-list,.v-list-item.draftButton, .v-list-item.clone{
          &:hover{
            .uiIcon,span {
              color: #ffffff!important;
            }
            background-image: linear-gradient(to bottom, @primaryColor, @primaryColor);
          }
        }
        .v-list-item {
          min-height: 30px!important;
          .uiIcon {
            font-size: 16px;
          }
          .noColorLabel {
            border: 1px solid @borderColor;
            cursor: pointer;
          }
          .projectColorPicker {
            width: 144px;
            max-width: 144px;
            .projectColorCell {
              width: 20px;
              height: 20px;
              min-width: 20px;
              min-height: 20px;
              margin: 2px;
              cursor: pointer;
            }
            .isSelected {
              position: relative;
              text-align: center;
              .fa-check();
              &:before {
                .fa();
                color: white;
                font-size: @textFontSize;
              }
            }
          }
        }
      }
    }
  }
  .projectTasksDashboard {
    min-height: calc(~"100vh - 117px")!important;
    .projectTasksTabFilter {
      flex: 0 1 70%;
    }
    .taskViewBreadcrumb {
      flex: 0 1 30%;
      a {
        i {
          color: @greyColorLighten1;
        }
        span {
          font-size: 1.25rem;
          letter-spacing: .5px;
          padding-left: 10px ~'; /** orientation=lt */ ';
          padding-right: 10px ~'; /** orientation=rt */ ';
        }
      }
    }
    .tasksToolbar {
      height: auto!important;
      .v-toolbar__content {
        height: auto!important;
        padding: 0!important;
        .taskDisplay {
          .projectTasksViewTabs {
            .v-tabs-bar {
              height: auto!important;
              .taskTabBoard {
                border: 1px solid @borderColor;
                border-radius: 5px 0 0 5px;
                height: 38px;
                min-height: 38px;
                .uiIconBoard {
                  .far();
                  .fa-clipboard();
                }
              }
              .taskTabList {
                border-radius: 0;
              }
              .taskTabGantt {
                border: 1px solid @borderColor;
                border-radius: 0 5px 5px 0;
                height: 38px;
                min-height: 38px;
                .uiIconGantt {
                  .fas();
                  .fa-stream();
                }
              }
            }
          }
        }
      }
    }
    .tasksView {
      .projectTaskItem {
        position: relative;
        .tasksViewHeaderStatus{
          .taskStatusActionMenu{
            right: 22px ~'; /** orientation=lt */ ';
            left: 22px ~'; /** orientation=rt */ ';
            left: auto ~'!important; /** orientation=lt */ ';
            right: auto ~'!important; /** orientation=rt */ ';
            top: 41px!important;
          }
          .text-truncate{
            font-size: 18px!important;
          }
        }
        .tasksViewHeaderStatus {
          .v-list-item {
            min-height: 30px!important;
            text-align: left!important;
            max-width: 100%!important;
          }
          .uiIconSocSimplePlus {
            font-size: 16px;
            margin-top: -3px;
            color:@greyColorLighten1!important;
          }
          .uiIconSocSimplePlus:hover {
            color:@primaryColor!important;
            cursor: pointer;
          }
        }
        .tasksViewHeader {
          .tasksViewHeaderLeft{
            max-width: 85%;
          }
          .taskStatusName {
            max-width: 100%;
            margin-top: 3px;
            .statusName{
              max-width: 88%;
              cursor: pointer;
            }
            .uiTaskNumber {
              border-radius: 10px;
              background: #c7e5f9c9;
              border-color: var(--allPagesPrimaryColor, #476A9C) !important;
              color: var(--allPagesPrimaryColor, #476A9C);
              border: thin solid rgba(0, 0, 0, 0.12);
              width: 28px;
              height: 21px;
              margin-left: 5px ~'; /** orientation=lt */ ';
              margin-right: 5px ~'; /** orientation=rt */ ';
              text-align: center;
              margin-block-end: 5px;
              cursor: pointer;
              margin-top: 0%;
            }
          }
          .taskStatusNameEdit {
            max-width: 100%;
            padding-top: 0px;
            width: 266px;
          }

          .taskNumberAndActions {
            .uiIconVerticalDots,.uiIconSocSimplePlus {
                font-size: 16px;
                margin-top: -3px;
                min-width: 22px;
                color:@greyColorLighten1!important;
                &:before {
                  margin: 0 auto;
                }
              }
            .uiIconVerticalDots:hover,.uiIconSocSimplePlus:hover {
                color:@primaryColor!important;
              cursor: pointer;
            }
            .uiIconThreeDots {
              font-size: 15px;
              &:before {
                content: '\e79c';
              }
            }
            .showTasksPagination {
              .uiIconArrowNext {
                font-size: @textFontSize;
                &:before {
                  content: '\e925';
                }
              }
            }
          }
          .taskStatusActionMenu {
            right: 27px ~'; /** orientation=lt */ ';
            left: 27px ~'; /** orientation=rt */ ';
            left: auto ~'!important; /** orientation=lt */ ';
            right: auto ~'!important; /** orientation=rt */ ';
            top: 35px!important;
            .v-list-item {
              min-height: 30px!important;
              text-align: start!important;
              max-width: 100%!important;
              padding: 2px 10px;

              i {
                min-width: 24px;
                text-align: center;
              }
            }
          }
        }
        .v-divider {
          border-top-width: 2px;
          margin-top: -4px;
          margin-bottom: 0;
        }
      }
    }
    .tasksViewBoard {
      .tasksViewBoardRowContainer {
        flex-wrap: nowrap!important;
        overflow-x: scroll;
        padding-bottom: 0;
        &::-webkit-scrollbar {
          height: 5px;
        }
        &::-webkit-scrollbar-thumb {
          background: white;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: white;
        }
        &:hover {
          overflow-x: scroll!important;
          &::-webkit-scrollbar {
            height: 5px;
          }
          &::-webkit-scrollbar-thumb {
            background: @greyColorLighten1;
            border-radius: 10px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background: @borderColorLight;
          }
        }

        .projectTaskItem {
          position: relative;
          flex: 1 1 340px;
          width: 0;
          min-width: 340px;
          max-width: 340px;
        }
      }
    }     
  }
  .projectTaskBoardContainer {
    height: calc(~"100vh - 104px")!important;
    min-height: calc(~"100vh - 104px")!important;
  }
}
.taskCard {
  border: 1px solid @tableBorder!important;
  background: @tableBackgroundAccent;
  .taskTitleId {
    .taskCheckBox{
      padding-right: 10px ~'; /** orientation=lt */ ';
      padding-left: 10px ~'; /** orientation=rt */ ';
      .uiIconCircle {
        color: @primaryColor;
        font-style: normal;
        font-weight: bold;
        font-size: 19px;
        cursor: pointer;
      }
      .uiIconValidate{
        font-style: normal;
        font-weight: bold;
        font-size: 19px;
        cursor: pointer;
      }
    }
    .taskTitle {
      cursor: pointer;
      width: 90%;
      max-width: 90%;
      .strikethrough{
        text-decoration: line-through;
      }
      .taskCardViewTitle{
        .taskTitleEllipsis {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          max-height: 50%;
          cursor: pointer;
        }
      }
    }
    .taskId {
      cursor: pointer;
      width: 25%;
      max-width: 25%;
      text-align: end;
    }
  }
  .taskAssignee {
    .assigneDetails {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-right: 4px ~'; /** orientation=lt */ ';
      padding-left: 4px ~'; /** orientation=rt */ ';
      padding-left: 0 ~'; /** orientation=lt */ ';
      padding-right: 0 ~'; /** orientation=rt */ ';
    }
  }
  .hideTaskAssignee {
    height: 0!important;
    min-height: 0!important;
  }
  .taskAssigneeAndLabels {
    .taskAssignee {
      height: 35px;
      min-height: 35px;
      .assigneDetails {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-right: 4px ~'; /** orientation=lt */ ';
        padding-left: 4px ~'; /** orientation=rt */ ';
        padding-left: 0 ~'; /** orientation=lt */ ';
        padding-right: 0 ~'; /** orientation=rt */ ';
      }
    }
  }
  .taskActionsAndProject {
    .taskProject {
      max-width: 70%;
      width: 70%;
      .projectSpaceDetails {
        align-items: center;
        max-width: 80%;
        display: inherit;
        .taskProjectNameChip {
          max-width: 100%;
          width: 100%;
          .v-chip.v-size--small {
            height: auto!important;
          }
        }
      }
    }
  }
}
.smallTaskCard {
  min-height: 170px!important;
  height: 170px!important;
}
.taskViewCard {
  min-height: inherit;
  height: inherit;
}
.taskHighPriority {
  border-left: 5px solid @errorColor ~'!important; /** orientation=lt */ ';
  //border-right: 5px solid @errorColor ~'!important; /** orientation=rt */ ';
}
.taskNormalPriority {
  border-left: 5px solid @warningColor ~'!important; /** orientation=lt */ ';
  //border-right: 5px solid @warningColor ~'!important; /** orientation=rt */ ';
}
.taskLowPriority {
  border-left: 5px solid @successColor ~'!important; /** orientation=lt */ ';
  //border-right: 5px solid @successColor ~'!important; /** orientation=rt */ ';
}
.taskNonePriority {
  border-left: 5px solid #476A9C ~'!important; /** orientation=lt */ ';
  //border-right: 5px solid @primaryColor ~'!important; /** orientation=rt */ ';
}
.taskComment {
  .uiCommentIcon {
    margin-right: 5px ~'; /** orientation=lt */ ';
    margin-left: 5px ~'; /** orientation=rt */ ';
    &:before {
      .far();
      color: @likeButtonColor;
      font-style: normal;
      font-size: 20px;
    }
  }
}
.taskActionsAndDate{
  cursor: pointer;
  .taskDueDate {
    font-size: 13px;
  }
  .taskActionsAndLabels {
    max-width: 70%;
    .taskLabels{
      max-width: 100%;
      .v-chip{
        cursor:pointer;
      }
    }
    .taskLabelsAssignee{
      max-width: 77%;
      .v-chip{
        cursor:pointer;
      }
    }
    .taskLabelsAssigneeComment {
      max-width: 50%;

      .v-chip {
        cursor: pointer;
      }
    }
    .taskTags {
      .uiTagIcon {
        padding-right: 2px ~'; /** orientation=lt */ ';
        padding-left: 2px ~'; /** orientation=rt */ ';
        .fa-tag();
        &:before {
          .fa();
          color: @likeButtonColor;
          font-style: normal;
          font-size: 18px;
        }
      }
    }
  }
}
.taskAssignee {
  //padding: 2px 4px;
  //padding-left: 0;
  .taskWorkerAvatar {
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    img {
      display: none;
    }
  }
  .seeMoreAvatars {
    .seeMoreItem {
      position: relative;
      &:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: @baseColorMedium;
        border-radius: 50%;
        opacity: .5;
        z-index: 1;
      }
      .seeMoreAvatarList {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        height: 27px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 15px;
        font-weight: bold;
        z-index: 1;
      }
    }
  }
}
.taskCard {
  .v-divider {
    border-top-width: 1px!important;
    margin-top: 8px!important;
    margin-bottom: 8px!important;
  }
}
#taskCardItem {
  margin-top: 8px;
}
.unscheduledTasksDrawer {
  .drawerHeader {
    .drawerTitle {
      padding: 0!important;
      .titleAndFilter {
        width: 100%;
        text-align: left;
        .unscheduledTasksFilter {
          .v-text-field__slot input {
            padding-bottom: 2px!important;
          }
          .v-input__icon.v-input__icon--clear button {
            font-size: 16px!important;
            padding-top: 15px!important;
          }
        }
      }
      .filter-btn .v-icon.v-icon::after {
        display: none;
      }
    }
    
    .drawerIcons {
      margin-left: 0 ~'!important; /** orientation=rt */ ';
      margin-right: 0 ~'!important; /** orientation=lt */ ';
    }
  }

  .drawerContent {
    padding: 8px 16px;
    .noUnscheduledTasksFound {
      text-align: center;
      margin-top: 40%;
      .noTasksIcon i {
        font-size: 50px;
        color: @greyColorDefault;
        padding-bottom: 10px;
      }
      .noTasksLabel span {
        font-size: 16px;
        color: @greyColorLighten1Default;
      }
    }
  }
}
.TaskCommentItem .commentBody .taskContentComment li {
  list-style-position: inside;
  list-style-type: inherit;
}
.projectAndTasksContainer {
  .noTasksProject {
    min-height: 50vh;
    height: 50vh;
    text-align: center;
    padding-top: 10%;
    .noTasksProjectIcon {
      i {
        font-size: 70px;
        color: @greyColor;
        padding-bottom: 20px;
      }
      .uiIconClipboard{
        &:after {
          content: '\e9d0';
          font-size: 29.5px;
          position: absolute;
          bottom: 12px;
          right: -5px ~'; /** orientation=lt */ ';
          background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
        }
      }
      .uiIconTask {
        &:after {
          content: '\e9d0';
          font-size: 29.5px;
          position: absolute;
          bottom: 12px;
          right: -5px ~'; /** orientation=lt */ ';
          background: white;
        }
      }
    }
    .noTasksProjectLabel {
      font-size: 18px;
      color: @greyColorLighten1;
    }
    .noTasksProjectLink {
      font-size: 1.1rem;
      padding-top: 12px;
    }
  }
  .tasksCardsContainer {
    /* Zooming exits */
    @-webkit-keyframes zoomOut {
      from {
        opacity: 1;
      }

      50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }

      to {
        opacity: 0;
      }
    }
    @keyframes zoomOut {
      from {
        opacity: 1;
      }

      50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }

      to {
        opacity: 0;
      }
    }
    .completedTask {
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: zoomOut;
      animation-name: zoomOut;
    }
    .draggable-palceholder{
      min-height: 180px;
    }
    .status-add-task{
      margin-right: 10px ~'; /** orientation=lt */ ';
      margin-left: 10px ~'; /** orientation=rt */ ';
    }
    .addTaskCard {
      margin-top: 10px;
      border: 1px solid @borderColor !important;
    }
    .quickAddNewTaskButton {
      width: 100%;
      margin-top: 10px;
      color:@greyColorLighten1!important;
    }
    .quickAddNewTaskButton:hover {
      color: @btnPrimaryColor!important;
      background: @btnPrimaryBackground!important;
    }
    .taskBoardNoFilterColumn {
      height: calc(~"100vh - 210px")!important;
      max-height: calc(~"100vh - 210px")!important;
    }
    .taskBoardColumn {
      max-height: calc(~"100vh - 210px")!important;
      overflow-y: scroll;
      overflow-x: hidden;
      padding-right:4px ~'; /** orientation=lt */ ';
      padding-left:4px ~'; /** orientation=rt */ ';
      &::-webkit-scrollbar {
        scroll-margin-left: 10px ~'!important; /** orientation=lt */ ';
        scroll-margin-right: 10px ~'!important; /** orientation=rt */ ';
        width: 5px;
        padding-left: 3px ~'; /** orientation=lt */ ';
        padding-right: 3px ~'; /** orientation=rt */ ';
      }
      &::-webkit-scrollbar-thumb {
        background: white;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: white;
      }
      &:hover {
        overflow-y: scroll;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          scroll-margin-left: 10px ~'!important; /** orientation=lt */ ';
          scroll-margin-right: 10px ~'!important; /** orientation=rt */ ';
          width: 5px;
          padding-left: 3px ~'; /** orientation=lt */ ';
          padding-right: 3px ~'; /** orientation=rt */ ';
        }
        /*&::-webkit-scrollbar-track {
          background: @primaryBackground;
        }*/
        &::-webkit-scrollbar-thumb {
          scroll-margin-left: 10px ~'!important; /** orientation=lt */ ';
          scroll-margin-right: 10px ~'!important; /** orientation=rt */ ';
          background: @greyColorLighten1;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: @borderColorLight;
        }
      }
    }
  }
  .tasksList {
    /* Zooming exits */
    @-webkit-keyframes zoomOut {
      from {
        opacity: 1;
      }

      50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }

      to {
        opacity: 0;
      }
    }
    @keyframes zoomOut {
      from {
        opacity: 1;
      }

      50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }

      to {
        opacity: 0;
      }
    }
    .completedTask {
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: zoomOut;
      animation-name: zoomOut;
    }
    .tasksListItem {
      .taskListItemView {
        background-color: @tableBackgroundAccent;
        border: 1px solid @tableBorder;
        border-radius: 4px;
        .taskCheckBox {
          max-width: 3%;
          width: 3%;
          align-self: flex-start!important;
          padding-right: 10px ~'; /** orientation=lt */ ';
          padding-left: 10px ~'; /** orientation=rt */ ';
          .uiIconCircle {
            color: @primaryColor;
            font-style: normal;
            font-weight: bold;
            font-size: 19px;
            padding-top: 5px;
            cursor: pointer;
          }
          .uiIconValidate{
            font-style: normal;
            font-weight: bold;
            font-size: 19px;
            cursor: pointer;
            padding-top: 5px;
          }
        }
        .taskTitle {
          .strikethrough{
            text-decoration: line-through;
          }
          max-width: 40%;
          width: 40%;
          text-align: start;
          flex: 1 1 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        .taskTitleAndId {
          width: 25%!important;
          .taskTitle {
            width: 100%!important;
            max-width: 100%!important;
          }
          .taskId {
            text-align: start!important;
          }
        }
        .taskProject {
          max-width: 10%;
          width: 10%;
          text-align: start;
          .projectSpaceDetails {
            cursor: pointer;
            .spaceAvatar {
              //min-width: 30px;
            }
            .taskProjectNameChip {
              max-width: 72%;
              .v-chip.v-size--small {
                height: auto!important;
                cursor: pointer;
              }
            }
            .taskProjectNameChipSpace {
              max-width: 47%;
              .v-chip.v-size--small {
                height: auto!important;
                cursor: pointer;
              }
            }
          }
          .taskProjectName {
            max-width: 160px;
          }
        }
        .taskAssignee {
          max-width: 3%;
          width: 3%;
          border-radius: inherit;
          text-align: start;
        }
        .taskLabels {
          max-width: 8%;
          width: 8%;
          text-align: center;
          cursor: pointer;
          .taskTags {
            .uiTagIcon {
              .fa-tag();
              &:before {
                .fa();
                color: @likeButtonColor;
                font-style: normal;
                font-size: 18px;
              }
            }
          }
        }
        .taskActions {
          max-width: 3%;
          width: 3%;
          text-align: center;
          cursor: pointer;
        }
        .taskStat {
          max-width: 7%;
          width: 7%;
          cursor: pointer;
          text-align: start;
          flex: 1 1 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .taskStatLabel {

          }
        }
        .taskDueDate {
          max-width: 6%;
          width: 6%;
          text-align: end;
          cursor: pointer;
        }
        .taskDateAndStat {
          max-width: 6%;
          width: 6%;
          text-align: end;
          font-size: @textFontSize;
          cursor: pointer;
          .taskDueDate {
            max-width: 100%;
            width: 100%;
          }
          .taskStat {
            font-size: @textFontSize;
            max-width: 100%;
            width: 100%;
          }
        }
      }
      .taskHighPriority {
        border-left: 5px solid @errorColor ~'!important; /** orientation=lt */ ';
        border-right: 5px solid @errorColor ~'!important; /** orientation=rt */ ';
      }
      .taskNormalPriority {
        border-left: 5px solid @warningColor ~'!important; /** orientation=lt */ ';
        border-right: 5px solid @warningColor ~'!important; /** orientation=rt */ ';
      }
      .taskLowPriority {
        border-left: 5px solid @successColor ~'!important; /** orientation=lt */ ';
        border-right: 5px solid @successColor ~'!important; /** orientation=rt */ ';
      }
      .taskNonePriority {
        border-left: 5px solid @primaryColor ~'!important; /** orientation=lt */ ';
        border-right: 5px solid @primaryColor ~'!important; /** orientation=rt */ ';
      }
    }
    .tasksViewList {
      .taskTitle {
        width: 59%!important;
        max-width: 59%!important;
      }
      .taskAssignee {
        max-width: 5%!important;
        width: 5%!important;
        border-radius: initial;
      }
      .taskLabels {
        max-width: 10%!important;
        width: 10%!important;
        .v-chip__content {
          cursor: pointer;
        }
      }
      .taskActions {
        max-width: 6%!important;
        width: 6%!important;
      }
      .taskStat {
        max-width: 10%!important;
        width: 10%!important;
      }
      .taskDueDate {
        max-width: 7%!important;
        width: 7%!important;
      }
    }
  }
  .taskProject {
    .taskProjectName {
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
    .taskProjectNameCard {
      width: 120px;
    }
    .spaceAvatar {
      .spaceAvatarImg {
        border-radius: 4px;
      }
    }
    .noSpaceAvatar {
      background: white;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      .noSpaceProjectIcon {
        color: @greyColor;
      }
    }
    .noProjectColor {
      background: @baseColorLight!important;
      border: 2px solid @baseColorLight;
    }
    .beige {
      background: #FFE1BE!important;
      border: 2px solid #FFE1BE;
    }
    .asparagus {
      background: #909958!important;
      border: 2px solid #909958;
    }
    .laurel_green {
      background: #BED67E!important;
      border: 2px solid #BED67E;
    }
    .moss_green {
      background: #98CC81!important;
      border: 2px solid #98CC81;
    }
    .munsell_blue {
      background: #319AB3!important;
      border: 2px solid #319AB3;
    }
    .sky_blue {
      background: #4DBED9!important;
      border: 2px solid #4DBED9;
    }
    .powder_blue {
      background: #9EE4F5!important;
      border: 2px solid #9EE4F5;
    }
    .baby_blue {
      background: #B2E2FF!important;
      border: 2px solid #B2E2FF;
    }
    .navy_blue {
      background: #4273C8!important;
      border: 2px solid #4273C8;
    }
    .blue_gray {
      background: #8EB0EA!important;
      border: 2px solid #8EB0EA;
    }
    .light_blue {
      background: #B3CFFF!important;
      border: 2px solid #B3CFFF;
    }
    .light_gray {
      background: #CDCDCD!important;
      border: 2px solid #CDCDCD;
    }
    .purple {
      background: #774EA9!important;
      border: 2px solid #774EA9;
    }
    .light_purple {
      background: #BC99E7!important;
      border: 2px solid #BC99E7;
    }
    .pink {
      background: #FFC8F0!important;
      border: 2px solid #FFC8F0;
    }
    .hot_pink {
      background: #F97575!important;
      border: 2px solid #F97575;
    }
    .Orange {
      background: #FFA500!important;
      border: 2px solid #FFA500;
    }
    .light_brown {
      background: #C5B294!important;
      border: 2px solid #C5B294;
    }
    .gray {
      background: #A39594!important;
      border: 2px solid #A39594;
    }
    .plum {
      background: #CEA6AC!important;
      border: 2px solid #CEA6AC;
    }
  }
  .taskLabels {
    .labelText {
      background: @greyColor;
      padding: 2px 4px;
      cursor: pointer;
    }
    .noLabelText {
      color: @greyColorLighten1;
    }
  }
  .AllAssigneeAvatar {
    box-shadow: 0 0 2px 1px @greyColor;
    border-radius: 25px;
    width: auto!important;
    display: inline-flex!important;
    padding: 2px 4px;
    padding-left: 0 ~'; /** orientation=lt */ ';
    padding-right: 0 ~'; /** orientation=rt */ ';
    .uiIconArrowBack {
      font-size: 12px;
      padding-top: 6px;
      padding-left: 4px ~'; /** orientation=lt */ ';
      padding-right: 4px ~'; /** orientation=rt */ ';
      cursor: pointer;
    }
  }
  #TasksListToolbar {
    height: auto!important;
    .v-toolbar__content {
      height: auto!important;
      padding: 0;
    }
  }
  .toolbarLarge {
    .v-toolbar__content {
      padding-bottom: 50px!important;
    }
  }
}
#ProjectListToolbar {
  height: auto!important;
  .v-toolbar__content {
    height: auto!important;
    padding: 0;
  }
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.showTaskCommentDrawer {
  position: fixed;
  top: 0;
  right: 0 ~'; /** orientation=lt */ ';
  left: 0 ~'; /** orientation=rt */ ';
  width: 420px;
  background: white;
  height: 100%;
  z-index: 1035;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

.showTaskChangesDrawer {
  position: fixed;
  top: 0;
  right: 0 ~'; /** orientation=lt */ ';
  left: 0 ~'; /** orientation=rt */ ';
  width: 420px;
  background: white;
  height: 100%;
  z-index: 1035;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

/*----------- Task Snapshot CSS ---------------*/

.flexCard {
  flex: 1 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-show{
  color: @primaryColor!important;
  margin-block-end: 5px;
  border:none!important;
}
.btn-show:hover {
  color: @primaryColor!important;
  background-color: #f2f2f2!important;
}
.projectCard {
  border-radius: 15px 15px 15px 15px;
  margin-right: 10px ~'; /** orientation=lt */ ';
  margin-left: 10px ~'; /** orientation=rt */ ';
  border: thin solid rgba(0, 0, 0, 0.12);
}
.amount-item{
  border-radius: 10px;
  background: #c7e5f9c9;
  border-color:@primaryColor!important;
  color: @primaryColor;
  border: thin solid rgba(0, 0, 0, 0.12);
  width: 30px;
  height: 20px;
  margin-left: 5px ~'; /** orientation=lt */ ';
  margin-right: 5px ~'; /** orientation=rt */ ';
  text-align: center;
  margin-top: 5px;
  margin-block-end: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  font-size: @textFontSize;
  padding-bottom: 2px;
}
.separator{
  margin-block-start: 15px;
  margin-left: 5px ~'; /** orientation=lt */ ';
  margin-right: 5px ~'; /** orientation=rt */ ';
  margin-right: 25px ~'; /** orientation=lt */ ';
  margin-left: 25px ~'; /** orientation=rt */ ';
}

.color-title {
  color: @greyColorLighten1;
}
.taskTitle {
  color: black;
  flex: 1 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px ~'; /** orientation=lt */ ';
  margin-left: 10px ~'; /** orientation=rt */ ';
  cursor: pointer;
  span {
    margin-left: 10px ~'; /** orientation=lt */ ';
    margin-right: 10px ~'; /** orientation=rt */ ';
  }
}
.nameGroup{
  display: flex;
  margin-top: 5px;
  margin-block-end: 5px;
}
.iconlarge {
  font-size: 40px;
  color:@successColorLight;
}
.noTasks {
  display: flex;
  height: 370px;
  align-items: center;
  justify-content: center;
  .noTasksContent {
    text-align: center;
    margin: auto;
    .uiNoTaskIcon {
      color: #6d7d9821;
      font-size: 60px;
      font-style: normal;
      font-weight: normal;
      .fa();
      .fa-clipboard-list();
    }
    .noTasksTitle {
      color: #4d5466;
      font-weight: normal;
      font-size: 22px;
    }
    p {
      font-weight: normal;
      font-size: 15px;
      color: @greyColorLighten1;
    }
  }
}
.list-item {
  display: flex;
  width: 100%;
  margin-right: 10px ~'; /** orientation=lt */ ';
  margin-left: 10px ~'; /** orientation=rt */ ';
}
.list-leave-active {
  transition: all 1s;
}
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/*---------------------Responsive Style ---------------------------*/

@media (max-width: 420px) {
  .taskDrawer {
    .text-header-title {
      font-size: 16px !important;
    }
    .taskDrawer .drawerHeader .drawerTitle #taskActionMenu .uiThreeDotsIcon:before {
      font-size: 22px!important;
    }
    .drawerTitle .taskProjectName .projectName {
      max-width: 173px!important;
    }
    .icon-ArrowRight:before {
      font-size: @textFontSize!important;
    }
    .mdi-close {
      font-size: 22px!important;
      width: 22px!important;
      height: 23px!important;
    }
    .drawerTitleAndProject {
      max-width: 90%!important;
    }
    .taskAssignItem {
      .assigneeName {
        p.text-truncate {
          max-width: 70px!important;
        }
      }
    }
  }
}

@media (max-width: @maxMobileWidth) {
  #TasksParentContainer {
    #TasksManagementPortlet {
      .projectAndTasksContainer {
        .tasksListContainer {
          .projectItem {
            .taskCardFlip {
              min-height: 190px !important;
              margin-bottom: 16px;
              .taskCardFront {
                height: auto;
                max-height: inherit;
                .tasksCardItem {
                  height: 190px!important;
                  max-height: 190px!important;
                  background-color: transparent!important;
                  border-bottom-width: 5px;
                  border-bottom-style: solid;
                  .taskItemToolbar {
                    background-color: transparent !important;
                    i {
                      color: @greyColorLighten1!important;
                    }
                    .projectCardTitle {
                      color: @textColor!important;
                      padding-left: 8px ~'; /** orientation=lt */ ';
                      padding-right: 8px ~'; /** orientation=rt */ ';
                    }
                  }
                  .taskItemInfo {
                    padding: 8px!important;
                    .descriptionDivider {
                      display: none!important;
                    }
                    .taskItemDescription {
                      min-height: inherit;
                    }
                    .largeDescriptionAreaSpace{
                      -webkit-line-clamp: 2;
                    }
                  }
                }
              }
              .tasksCardBack {
                height: auto;
                max-height: inherit;
                .tasksCardItem {
                  height: auto;
                  max-height: inherit;
                  .noTasksProject {
                    padding-top: 24px;
                    padding-bottom: 24px;
                    .noTasksProjectIcon {
                      .uiIconTask {
                        font-size: 30px;
                      }
                    }
                  }
                  .echartStatsContent {
                    .echartAndLabel {
                      margin-left: -35px;
                    }
                    .projectStatusNumber{
                      margin-left: -25px
                    }
                    .echartPieContent {
                      height: 130px!important;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .projectTasksDashboard {
        .tasksViewBoard {
          .projectTaskItem {
            flex: 1 1 100%!important;
            width: 100%!important;
          }
        }
      }
    }
  }
  .taskDisplay {
    display: none!important;
  }
}

@media (max-width: @maxLargeTabletWidth) {
  #TasksParentContainer {
    .projectAndTasksContainer {
      .tasksList {
        .tasksListItem {
          .taskListItemView {
            .taskAssignee {
              width: 15%!important;
              max-width: 15%!important;
              padding-right: 12px;
            }
            .taskLabels {
              .v-chip.v-size--small {
                max-width: 80%;
                padding: 0 4px;
                margin: 0!important;
              }
            }
          }
        }
      }
    }
    #taskCardItem {
      .taskTitle {
        cursor: pointer;
        width: 80%;
        max-width: 80%;
        .strikethrough{
          text-decoration: line-through;
        }
        .taskCardViewTitle{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }
      }
    }
    #TasksManagementPortlet {
      .projectAndTasksContainer {
        .projectTasksDashboard {
          .tasksViewBoard {
            .projectTaskItem {
              flex: 1 1 50%;
              width: 50%;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 599px) {
  #TasksManagementPortlet .projectAndTasksContainer .tasksToolbar{
    /*.v-input__icon.v-input__icon--prepend-inner {
      display: none;
    }*/
    .inputTasksFilter {
      display: none;
    }
    .taskFilterMobile {
      display: block;
    }
    .v-toolbar__title {
      min-width: 40px!important;
      margin-right: 5px;
    }
    button.btn.px-2.btn-primary.addNewProjectButton.v-btn.v-btn--contained.theme--light.v-size--default {
      min-width: auto!important;
    }
    button.btn.px-2.btn-primary.filterTasksSetting.v-btn.v-btn--depressed.v-btn--flat.v-btn--outlined.theme--light.v-size--default {
      min-width: auto!important;
    }
  }
}
@media (max-width: 599px) {
  .projectTasksDashboard {
    .taskViewBreadcrumb {
      flex: 0 1 80% !important;
    }
    .projectTasksTabFilter{
      flex: 0 1 20% !important;
    }
  }
}

@media (max-width: 399px) {
  .taskDrawer {
    .drawerTitle .taskProjectName .projectName {
      max-width: 120px !important;
    }
  }
  #TasksManagementPortlet {
    .projectAndTasksContainer {
      .tasksToolbar  {
        .selectPrimaryFilter {
          width: 120px!important;
          max-width: 120px!important;
          text-overflow: ellipsis;
        }
        .selectTasksFilter {
          width: 120px!important;
          max-width: 120px!important;
          text-overflow: ellipsis;
        }
        .taskFilterMobile {
          margin-left: 2px;
        }
        .filterTasksSetting {
          .uiIconFilterSetting {
            padding-right: 0px !important;
          }
        }
      }
    }
  }
}


/*--------------Task priorities Colors ------------------*/

.highPriorityColor {
  color: @errorColor!important;
}

.normalPriorityColor {
  color: @warningColor!important;
}

.lowPriorityColor {
  color: @successColor!important;
}

.nonePriorityColor {
  color: @infoColor!important;
}


/*--------------Task Project Colors ------------------*/

.asparagus {
  background: #909958 !important;
  &:hover {
    background: #909958 !important;
  }
}
.laurel_green {
  background: #BED67E !important;
  &:hover {
    background: #BED67E !important;
  }
}
.moss_green {
  background: #98CC81 !important;
  &:hover {
    background: #98CC81 !important;
  }
}
.munsell_blue {
  background: #319AB3 !important;
  &:hover {
    background: #319AB3 !important;
  }
}
.sky_blue {
  background: #4DBED9 !important;
  &:hover {
    background: #4DBED9 !important;
  }
}
.powder_blue {
  background: #9EE4F5 !important;
  &:hover {
    background: #9EE4F5 !important;
  }
}
.baby_blue {
  background: #B2E2FF !important;
  &:hover {
    background: #B2E2FF !important;
  }
}
.navy_blue {
  background: #4273C8 !important;
  &:hover {
    background: #4273C8 !important;
  }
}
.blue_gray {
  background: #8EB0EA !important;
  &:hover {
    background: #8EB0EA !important;
  }
}
.light_blue {
  background: #B3CFFF !important;
  &:hover {
    background: #B3CFFF !important;
  }
}
.light_gray {
  background: #CDCDCD !important;
  &:hover {
    background: #CDCDCD !important;
  }
}
.purple {
  background: #774EA9 !important;
  &:hover {
    background: #774EA9 !important;
  }
}
.light_purple {
  background: #BC99E7 !important;
  &:hover {
    background: #BC99E7 !important;
  }
}
.pink {
  background: #FFC8F0 !important;
  &:hover {
    background: #FFC8F0 !important;
  }
}
.beige {
  background: #FFE1BE !important;
  &:hover {
    background: #FFE1BE !important;
  }
}
.hot_pink {
  background: #F97575 !important;
  &:hover {
    background: #F97575 !important;
  }
}
.Orange {
  background-color: #FFA500 !important;
}
.CalendarTableColor {
  .Orange {
    background-color: #FFA500 !important;
  }
}
.light_brown {
  background: #C5B294 !important;
  &:hover {
    background: #C5B294 !important;
  }
}
.gray {
  background: #A39594 !important;
  &:hover {
    background: #A39594 !important;
  }
}
.plum {
  background: #CEA6AC !important;
  &:hover {
    background: #CEA6AC !important;
  }
}

.asparagus_border {
  border-color: #909958 !important;
}
.laurel_green_border {
  border-color: #BED67E !important;
}
.moss_green_border {
  border-color: #98CC81 !important;
}
.munsell_blue_border {
  border-color: #319AB3 !important;
}
.sky_blue_border {
  border-color: #4DBED9 !important;
}
.powder_blue_border {
  border-color: #9EE4F5 !important;
}
.baby_blue_border {
  border-color: #B2E2FF !important;
}
.navy_blue_border {
  border-color: #4273C8 !important;
}
.blue_gray_border {
  border-color: #8EB0EA !important;
}
.light_blue_border {
  border-color: #B3CFFF !important;
}
.light_gray_border {
  border-color: #CDCDCD !important;
}
.purple_border {
  border-color: #774EA9 !important;
}
.light_purple_border {
  border-color: #BC99E7 !important;
}
.pink_border {
  border-color: #FFC8F0 !important;
}
.beige_border {
  border-color: #FFE1BE !important;
}
.hot_pink_border {
  border-color: #F97575 !important;
}
.light_brown_border {
  border-color: #C5B294 !important;
}
.gray_border {
  border-color: #A39594 !important;
}
.plum_border {
  border-color: #CEA6AC !important;
}
.Orange_border {
  border-color: #FFA500 !important;
}
.green_border {
  border-color: #4CAF50 !important;
}
.red_border {
  border-color: #F44336 !important;
}
.yellow_border {
  border-color: #ffeb3b !important;
}
.brown_border {
  border-color: #795548 !important;
}

@keyframes beginDrag {
    from {
      transform: rotate(0deg)
    }
    10% {
      -webkit-transform: rotate(-12deg);
      transform: rotate(-12deg)
    }
    30% {
      -webkit-transform: rotate(8deg);
      transform: rotate(8deg)
    }
    55% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg)
    }
    80% {
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg)
    }
    to {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg)
    }
  }
  .ghost-card {
    opacity: 0.5;
    background: #F7FAFC;
    //border: 1px solid #476A9C;
    animation: beginDrag 1s ease forwards;
  }

.labelsActionMenu {
   max-width: 180px !important;
   min-width: 160px !important;
  .label-edit-name{
    max-width: 136px;
  }
  .label-btn {
    cursor: pointer;
  }

  .VuetifyApp .theme--light.v-list-item:hover::before {
    opacity: 0;
    .uiIcon,span {
      color: #ffffff!important;
    }
    background-image: linear-gradient(to bottom, @primaryColor, @primaryColor);
  }
  .v-list-item.menu-list,.v-list-item.draftButton, .v-list-item.clone{
    &:hover{
      .uiIcon,span {
        color: #ffffff!important;
      }
      background-image: linear-gradient(to bottom, @primaryColor, @primaryColor);
    }
  }
  .v-list-item {
    min-height: 30px!important;
    .uiIcon {
      font-size: 16px;
    }
    .noColorLabel {
      border: 1px solid @borderColor;
      cursor: pointer;
    }
    .projectColorPicker {
      width: 144px;
      max-width: 144px;
      .projectColorCell {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin: 2px;
        cursor: pointer;
      }
      .isSelected {
        position: relative;
        text-align: center;
        .fa();
        &:before {
          .fa-check();
          color: white;
          font-size: @textFontSize;
        }
      }
    }
  }
}


/*-----------------------------------------------------------
                     GANTT CHART STYLE
-----------------------------------------------------------*/
.gantt-wrapper {
  .unscheduled-task-container {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 30px;
    .unscheduled-task-btn {
      background-color: @greyColor!important;
      .mdi-calendar-range {
        color: @baseColorLight!important;
      }
      .unscheduled-task-badge {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -5px;
        right: 1px;
        background: @warningColor;
        font-size: 10px;
        border-radius: 50%;
        width: 18px;
        height: 18px;
    }
    }
  }
  .gantt-chart-container {
    padding-top: 20px;
    .gantt-tasks-title {
      margin-top: 60px;
      min-height: calc(~"100vh - 180px");
      height: calc(~"100vh - 180px");
      overflow: hidden;
      min-width: 180px;
      p {
        max-width: 180px;
        margin-bottom: 0!important;
        padding-top: 10px;
        padding-right: 10px;
        height: 27px;
        border-bottom: 1px solid #ebeff2;
      }
    }
  }
  
  .gantt {
  
    .grid-background {
      fill: none;
    }
    .grid-header {
      fill: #fff;
      stroke: #e0e0e0;
      stroke-width: 1.4;
    }
    .grid-row {
      fill: #fff;
      &:nth-child(even) {
        fill: #f5f5f5;
      }
    }
    .row-line {
      stroke: #ebeff2;
    }
    .tick {
      stroke: #e0e0e0;
      stroke-width: .2;
    }
    .tick.thick {
      stroke-width: .4;
    }
    .today-highlight {
      fill: #b5b5b5a8;
      opacity: .5;
    }
    .weekend-highlight {
      fill: #efefefa8;
      opacity: .5;
    }
    .arrow {
      fill: none;
      stroke: #666;
      stroke-width: 1.4;
    }
    .bar {
      fill: #b8c2cc;
      stroke: #8d99a6;
      stroke-width: 0;
      transition: stroke-width .3s ease;
      user-select: none;
    }
    .bar-invalid {
      fill: transparent;
      stroke: #8d99a6;
      stroke-width: 1;
      stroke-dasharray: 5;
    }
    .bar-invalid~.bar-label {
      fill: #555;
    }
    .bar-label {
      fill: #fff;
      dominant-baseline: central;
      text-anchor: middle;
      font-size: 12px;
      font-weight: lighter;
    }
    .bar-label.big {
      fill: #555;
      text-anchor: start;
    }
    .handle {
      fill: #ddd;
      cursor: ew-resize;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease;
    }
    .bar-wrapper {
      cursor: pointer;
      outline: 0;
      &:hover {
        .bar {
          fill: #a9b5c1;
        }
        .handle {
          visibility: visible;
          opacity: 1;
        }
      }
    }
    .bar_LOW {
      .bar-progress {
        fill: @successColor
      }
    }
    .bar_NORMAL {
      .bar-progress {
        fill: @warningColor;
      }
    }
    .bar_HIGH {
      .bar-progress {
        fill: @errorColor;
      }
    }
    .bar_NONE {
      .bar-progress {
        fill: @infoColor;
      }
    }
    .bar-wrapper.active {
      .bar {
        fill: #a9b5c1;
      }
    }
    .lower-text {
      font-size: 12px;
      text-anchor: middle;
      fill: #333;
    }
    .upper-text {
      font-size: 12px;
      text-anchor: middle;
      fill: #555;
    }
    .hide {
      display: none;
    }
  }
  .gantt-container {
    position: relative;
    overflow: auto;
    font-size: 12px;
    .popup-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 280px;
      width: 280px;
      max-width: 280px;
      color: #959da5;
      border-radius: 3px;
      -webkit-box-shadow: 0px -1px 28px -9px rgba(148,148,148,1);
      -moz-box-shadow: 0px -1px 28px -9px rgba(148,148,148,1);
      box-shadow: 0px -1px 28px -9px rgba(148,148,148,1);
      background: @tableBackgroundAccent;
      .popup-container {
        padding: 10px;
        border: 1px solid @borderColor!important;
        border-radius: 5px;
        .popup-title {
        padding-bottom: 6px;
        border-bottom: 1px solid @borderColor;
        margin-bottom: 6px!important;
        font-weight: bold;
        font-size: 13px;
        color: @textColor;
      }
      .assigneeAvatar {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        display: inline-flex;
        margin-right: 5px;
    }
    .popup-date {
      font-weight: bold;
      text-transform: capitalize;
      color: @textColor;
    }
    }
    .bar_LOW {
      border-left: 5px solid @successColor !important;
    }
    .bar_NORMAL {
      border-left: 5px solid @warningColor !important;
    }
    .bar_HIGH {
      border-left: 5px solid @errorColor !important;
    }
    .bar_NONE {
      border-left: 5px solid @infoColor !important;
    }
    }
  }
  
  .gantt-container {
    overflow: hidden;
  }
  .gantt-grid {
    max-height: calc(~"100vh - 250px")!important;
    height: calc(~"100vh - 250px")!important;
    overflow: hidden;
    position: relative;
    overflow-x: scroll;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: white;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: white;
    }
    &:hover {
      &::-webkit-scrollbar {
        height: 6px;
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: @greyColorLighten1;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: @borderColorLight;
      }
    }
  }
  
  .gantt-dates {
    overflow: hidden;
    height: 50px;
  }
  
  .gantt-dates::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    height: 0;
    background: transparent;  /* Optional: just make scrollbar invisible */
  }
  /* Optional: show position indicator in red */
  .gantt-dates::-webkit-scrollbar-thumb {
    background: #FFFFFF;
  }
  .gantt .arrow {
    display: none;
  }
  

}
