@import "variables.less";
// Variables
@primaryColor: #578DC9;
@greyColor: #a8b3c5;
@greyBackground: #e1e8ee;
@btnPrimaryDisableBackground: #afc9e5;
@blackColor: #333333;
/*--------------------------Tasks ---------------------------*/

#tasks {
  .flexCard {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .projectCard {
    border-radius: 5px 0px 0px 5px;
  }

  .flagCard {
    border-radius: 0px 5px 5px 0px;
  }
  .color-title {
    color: @greyColor;
  }
  .taskTitle {
    color: black;
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .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;
        &:before {
          font-family: 'PLF-FONT-ICONS';
          content: "\e690" !important;
        }
      }
      .noTasksTitle {
        color: #4d5466;
        font-weight: normal;
        font-size: 22px;
      }
      p {
        font-weight: normal;
        font-size: 15px;
        color: @greyColor;
      }
    }
  }

  @media (max-width: 1200px) {
    .theme--light.v-navigation-drawer {
      width: 60% !important;
    }
  }
  @media (max-width: 599px) {
    .theme--light.v-navigation-drawer {
      width: 100% !important;
    }
  }

  .list-item {
    display: flex;
    width: 100%;
    margin-right: 10px;
    min-height: 48px!important;
  }
  .list-leave-active {
    transition: all 1s;
  }
  .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
}

/*----------- Task Drawer CSS ---------------*/
#task-Drawer {
  .uiIconBlue {
    color: @primaryColor!important;
  }
  .v-select__selection {
    max-width: 100% !important;
  }
  .v-menu__content {
    max-width: 100% !important;
    background-color: white!important;
  }
  #assigneeMenu {
    .v-menu__content {
      max-width: 70% !important;
    }
  }
  .v-select.v-text-field {
    input {
      display: none;
    }
  }
  .centered-input {
    input {
      text-align: center;
    }
  }
  .taskTitle {
    input[type="text"] {
      font-size: 15px;
      color: #8EB0EA;
    }
  }
  .dateFont {
    input[type="text"] {
      font-size: 15px!important;
      cursor: pointer!important;
      color: @blackColor !important;
      width: 84px;
    }
    input[type="text"]::placeholder {
      color: @greyColor !important;
      padding-left: 8px;
    }
    .v-icon.v-icon.v-icon--link {
      color: @greyColor;
      padding-top: 8px;
      font-size: 20px;
    }
  }
  .assignTo {
    .v-select__slot {
      border: 1px solid @greyColor;
      border-radius: 5px;
    }
  }
  .assignee-name {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .v-date-picker-table--date {
    td {
      width: 38px;
    }
    tr {
      display: table-row !important;
    }
  }

  .v-date-picker-table {
    height: 190px;
  }
  .selectFont {
    .v-select__selection--comma {
      font-size: 15px;
      color: @blackColor !important;
      min-width: max-content!important;
    }
    .v-menu__content {
      top: 48px!important;
      left: 4px!important;
      max-width: fit-content!important;
    }
    .v-list-item__title {
      font-size: 14px;
    }
  }
  .user-name {
    font-size: 15px;
    color: @primaryColor !important;
  }
  .v-autocomplete {
    &:not(.v-input--is-disabled).v-select.v-text-field {
      input {
        display: block !important;
      }
    }
  }
  .v-text-field.v-text-field--solo {
    .v-label {
      top: 10px;
      font-size: 15px!important;
      color: @greyColor !important;
      margin-left: 6px;
    }
  }
  .mx-icon-calendar {
    display: none;
  }
  .mx-datepicker {
    width: 82%;
  }
  .mx-input {
    width: 92% !important;
    color: @greyColor;
    cursor: pointer;
    &:focus {
      border: none;
      box-shadow: none;
    }
  }
  #Task-title {
    color: @primaryColor;
  }
  .projectName {
    .v-input__control {
      min-height: 0px;
      height: 40px;
      padding-top: 6px;
      >.v-input__slot {
        width: fit-content;
      }
    }
  }
  .v-navigation-drawer .v-list {
    background-color: white;
  }
  .mdi-menu-down {
    &::before {
      display: none;
    }
  }
  .v-text-field.v-text-field--solo {
    &:not(.v-text-field--solo-flat) {
      >.v-input__control {
        >.v-input__slot {
          box-shadow: none;
          padding-left: 0px;
        }
      }
    }
  }
  .styleIcon {
    padding-top: 10px
  }
  .v-input--selection-controls {
    margin-top: 0px !important;
  }
  .v-text-field.v-text-field--enclosed {
    >.v-input__control {
      >.v-input__slot {
        padding: 0px;
        margin-bottom: 0px;
      }
    }
  }
  .editorContent {
    .subComment {
      max-width: 228px
    }
    .comment {
      max-width: 290px
    }
  }
  .hiddenEditor {
    visibility: hidden !important;
    display: none !important;
  }

  .taskDescription {
    border: 1px solid @greyBackground;
    border-radius: 5px;
    padding-top: 8px;
    padding-bottom: 8px
  }
  #taskDescriptionId p {
    line-height: 20px;
  }
  [contenteditable=true] {
    &:empty {
      &:before {
        content: attr(placeholder);
        pointer-events: none;
        display: block;
        color: @greyColor!important;
      }
    }
  }

  .uiIconAndroidOpen:before {
    font-family: 'PLF-FONT-ICONS';
    font-style: normal;
    font-size: 20px;
    content: "\e966"
  }
  .drawer-title {
    font-size: 20px;
    font-weight: bold;
  }
  .drawer-header {
    border-bottom: 1px solid rgba(13, 13, 13, 0.05);
  }
  .drawer-content {
    position: absolute;
    top: 55px;
    bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    right: 0;
    left: 0;
  }
  .v-text-field input {
    padding: 0px;
  }
  input[type="text"] {
    margin-bottom: 0px;
    width: auto;
  }
  .v-tab {
    box-sizing: border-box;
    margin: 0px!important;
  }
  .v-tabs-slider-wrapper {
    height: 3px !important;
  }
  .uiIconClock:before {
    font-size: 15px;
    color: @primaryColor;
  }
  .custom-placeholer-color {
    input {
      &::placeholder {
        color: @greyColor !important;
        opacity: 1;
      }
    }
  }
  .theme--light.v-tabs {
    >.v-tabs-bar {
      .v-tab {
        &:not(.v-tab--active) {
          color: @greyColor;
        }
      }
    }
  }
  .ck.ck-content {
    ul {
      list-style-type: inherit;
      li {
        list-style-type: inherit;
      }
    }
  }

  .v-avatar {
    align-self: flex-start!important;
  }
  .v-btn:not(.v-btn--round).v-size--small {
    flex: none;
  }
  #reply_btn {
    padding: 0px !important;
    display: -webkit-box;
  }

  .commentBtn {
    color: @primaryColor !important;
    background-color: @primaryColor !important;

    .v-btn__content {
      color: white;
    }
  }
  #check_btn {
    color: @primaryColor!important;
  }
  .v-input {
    display: inline-flex;
  }
  .task-name {
    width: 90%;
    input[type="text"]::placeholder {
      color: @greyColor !important;
    }
    &.taskCompleted{
      text-decoration: line-through;
    }
  }
  #task-name {
    border: none!important;
    color: @primaryColor !important;
    resize: none!important;
    .textarea:active {
      box-shadow: none;
    }
  }
  .theme--light.v-text-field {
    >.v-input__control {
      >.v-input__slot {
        &:before {
          display: none;
        }
      }
    }
  }
  .theme--dark.v-btn.v-btn--disabled {
    &:not(.v-btn--flat) {
      &:not(.v-btn--text) {
        &:not(.v-btn--outlined) {
          background-color: @btnPrimaryDisableBackground !important;
          border-color: @btnPrimaryDisableBackground !important;
        }
      }
    }
  }

  .taskContentComment {
    line-height: 20px;
    word-break: break-word;
    max-width: 300px;

    p {
      margin: 0px;
    }
  }
  .dateTime {
    color: #999;
    cursor: default;
  }
  .dueDateAlert {
    .v-alert__content {
      color: #8f5804;
      font-size: 14px;
    }
    .v-alert__wrapper {
      .v-icon {
        font-size: 18px;
      }
      .v-icon::before {
        color: #8f5804!important;
      }
    }
  }
   .dueDateError {
    .v-alert__content {
      font-size: 14px;
    }
    .v-alert__wrapper {
      .v-icon {
        font-size: 18px;
      }
    }
  }
  .deleteComment {
    height: 19px;
    width: 19px;
  }

  .projectName {
    height: 26px;
    display: inline-table;
    max-width: 220px;
  }
  .uiIconBlue {
    font-size: 14px;
    margin-top: 4px;
  }
}

/*--------------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;
}
.uiIconCalTask:before {
  content: "\e611";
  font-family: "PLF-FONT-ICONS";
}
