@import "_mixins.less";
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@images-path: "/eXoSkin/skin/images/themes/default";

/* Reset*/
body {
   .editable-click, a.editable-click, a.editable-click:hover{
       border:  1px solid transparent;
    } 

}

input.grayLarge {
    font-size: 18px;
    height: 36px;
    width: 100%;
}

input.blackLarge {
    font-size: 18px;
    height: 36px;
    width: 100%;
}

input.grayNormal {
    font-size: 13px;
    height: 28px;
    width: 100%;
}

input.blackNormal {
    font-size: 13px;
    height: 28px;
    width: 100%;
}

select.selectboxMini {
    height: 30px;
    vertical-align: middle;
    width: 72px;
    margin: 0;
}

li[data-showhiddenproject="false"] {
  li[data-hiddenproject="true"] {
    display: none;
  }
  .label-hideHiddenProject {
    display: none;
  }
  li.all-children-hided {
    a.collapseSubProject {
      display: none;
    }
  }
}
li[data-showhiddenproject="true"] {
  .label-showHiddenProject {
    display: none;
  }
  .uiIconShowProject:before {
    content: "\e792";
  }
  .all-project-hidden {
    display: none;
  }
}
li[data-hiddenproject="true"] {
  a.project-name,
  a.label-name {
    opacity: 0.5;
  }
  > .sub-item {
    .label-hide {
      display: none;
    }
  }
}
li[data-hiddenproject="false"] {
  > .sub-item {
    .label-show {
      display: none;
    }
  }
}
.not-all-project-hidden {
  display: none;
}

/*for label*/
li[data-showhiddenlabel="false"] {
  li[data-hiddenlabel="true"] {
    display: none;
  }
  .label-hideHiddenLabel {
    display: none;
  }
  li.all-children-hided {
    a.collapseSubLabel {
      display: none;
    }
  }
}
li[data-showhiddenlabel="true"] {
  .label-showHiddenLabel {
    display: none;
  }
  .uiIconShowLabel:before{
    content: "\e792";
  }
  .all-label-hidden {
    display: none;
  }
}
li[data-hiddenlabel="true"] {
  a.label-name {
    opacity: 0.5;
  }
  > .sub-item {
    .label-hide {
      display: none;
    }
  }
}
li[data-hiddenlabel="false"] {
  > .sub-item {
    .label-show {
      display: none;
    }
  }
}
.not-all-label-hidden {
  display: none;
}
.uiAccordion.leftPanel .accordion-heading .sub-item .label-name {
    padding-left: 30px;
}

.empty-box {
    position: relative;
    text-align: center;
    padding-top: 100px!important;
    padding-bottom: 100px!important;
    min-height: 200px;
    .empty-content {
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .image {
        margin-bottom: 15px;
    }
    .text-notify {
        font-size: 24px;
        line-height: 26px;
        span {
            font-size: 18px;
            display: block;
        }
    }
}
.projectListView {
    > .header {
        margin-bottom: 20px;
    }
    .header {
        padding: 10px;
        .input-field {
            position: relative;
            .popover  {
                 left: 0!important;
                 top: 43px!important;
                 .arrow {
                    left: 50px;
                 }
            }
        }
        h2 {
            margin: 0 0 0 5px;
            font-size: 19px;
            line-height: 100%;
            padding-top: 5px;
        }
    }
    .uiContentBox {
        padding: 0;
        .table-project-collapse .heading {
            .group-name, .amount-item{
                font-size: 18px;
                font-weight: normal;
                margin-left: 4px;
            }
            .group-name.user, .amount-item.user{
                font-size: 13px;
                font-weight: bold;
                margin-left: 0px;
            }
        }
    }
}


.taskMngCont {
	margin: 20px;
    .taskList{
        .pagination{
            margin: 20px 15px;
        }
    }
    .taskBoardView{
        .hover-action-reveal{
            .inline-block-hide:hover{
                .uiIcon{
                    color: white;
                }
            }
        }
    }
    .modalPlace{
        .popupTitle{
            .dropdown{
                .uiIconArrowDown{
                    margin: 0;
                }
            }
        }
        .popupHeader{
            .uiIconClose{
                color: #626262;
            }
        }
    }
    .accordion-heading{
        .dropdown{
            .calendarTableColor{
                .colorCell{
                    .uiIconTick{
                        top: -1px;
                        color: white;
                    }
                }
            }
        }
        .dropdownIcon{
            .uiIconArrowDownMini, .uiIconArrowRightMini{
                font-size: 9px;
            }
        }
    }
    .addTask{
        .assignmentPopup{
            .dropdown-menu{
                .text{
                    margin: 0 16px 0 26px;
                    display: block;
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .avatarMini{
                    position: absolute;
                    top: 3px;
                }
                .user-status{
                    top: 5px;
                }
            }
            @media(max-width: 767px) {
                transform: translate(95px);
            }
        }
    }
    .resizeButton{
        .uiIconMiniArrowLeft, .uiIconMiniArrowRight{
            font-size: 10px;
        }
    }

}

/* Projects Area */
#taskManagement {
    .tooltip {
        white-space: nowrap;
    }
    .centerPanel.uiBox .projectListView {
        .title {
            padding:4px 5px;
            line-height: 28px;
            .label-title {
                font-size: 18px;
                font-weight: bold;
                padding-left: 10px;
                padding-right: 10px;
                max-width: 38%;
                .text-overflow();
            }
            .uiSearchInput input[type="text"] {
                min-height: 28px;
                height: 28px;
                float: right;
                max-width: 200px;
            }
            .uiSearchInput .advancedSearch,
            .uiSearchInput .AdvancedSearch {
                top: 5px;
            }
            .settingActionButtons {
                margin-left: 5px;
                .actionIcon {
                    margin-top: 1px;
                    float: left;
                }
                .Selected{
                    background-color: #f9f9f9;
                    background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
                    background-repeat: repeat-x;
                    border: 1px solid #cccccc;
                    border-radius: 3px;
                    box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0);
                    color: #333333;
                }
            }
        }
    }
    @media(min-width: 1500px) {
        .accordion-heading {
            .item {
                .dropdown-menu {
                    left: 88.5%!important;
                }
            }
        }
    }
    @media(min-width: 1600px) {
        .accordion-heading {
            .item {
                .dropdown-menu {
                    left: 90%!important;   
                }
            }
        }
    }
    @media(min-width: 1700px) {
        .accordion-heading {
            .item {
                .dropdown-menu {
                    left: 90.5%!important;
                }
            }
        }
    }
    @media(min-width: 1800px) {
        .accordion-heading {
            .item {
                .dropdown-menu {
                    left: 91%!important;   
                }
            }
        }
    }
    @media(min-width: 1900px) {
        .accordion-heading {
            .item {
                .dropdown-menu {
                    left: 91.5%!important;   
                }
            }
        }
    }
    .uiAccordion.leftPanel .accordion-heading {
        .item {
            border-bottom: none;
            .dropdown-menu {
             left: 88%; 
             top: -22px;  
             z-index : 1011;
            }
        }
        .item + .list-projects, .list-labels {
            border-top: 1px solid #ccc;
        }
        .sub-item {
            border-bottom: none;
            + .sub-menu {
                border-top: 1px solid white;
            }
        }
        .sub-item + .list-labels{
            border-top: none;
        }
    }
    .centerPanel.span5 .title .label-title {
        max-width: 130px;
    }

    .centerPanel.span9 {
        .uiHeaderBar.toggle {
            .label-title  {
                display: block;
            }
        }
    }
    .selectize-dropdown .active {
	  background-color: #578dc9;
	  color: #ffffff;
	}
	.selectize-dropdown-content .option .avatarMini {
	  display: table-cell;
	  width: 20px;
	  padding: 5px 2px;
	}
	.selectize-dropdown-content .option .text {
	  display: table-cell;
      width: 100%;
	  padding: 5px 2px;
	}
	.selectize-dropdown-content .option .user-status {
	  display: table-cell;
	  width: 20px;
	  padding: 5px 2px;
	}
}


// Icomming

.leftPanel {
  .accordion-heading {
    .popover {
      left: auto;
       right: -112px;
      max-width: 256px;
      top: 26px;
      width: 250px
    }
    .popover.bottom .arrow {
        left: 120px;
    }
  }
}
.centerPanel{
  .uiHeaderBar {
      .alignBtnGroup {
        margin: 0 auto;
        width:200px;
      }
  }
}

.filter-form  {

     .btn.dropdown-toggle {
        padding-right: 10px;
     }
     .action-bar {
        display: inline-block;
        margin-top: 2px; margin-left: 5px;
        vertical-align: middle;
    }
}

.all-task {
   .all-task-action-toggle a.active {
        font-weight: bold;
    }
    span {
        vertical-align: middle;
    }
    .all-task-action {
        display: none;
        text-align: left;
    }
}
.editable-input  {
    textarea {
        width: 100%;
    }
}
.input-field {
  input {
    width: 100%;
    margin: 10px 0 0;
  }
}
// responsive center panel

.advancedSearch-action {
    display: none;
}
.centerPanel,.rightPanel  {
     position: relative;
     .resizeButton {
        cursor: pointer;
        height: 16px;
        left: -18px;
        position: absolute;
        top: 230px;

    }
}
/* To Override z-idex tooltip */
.breadcrumbCont {
    .dropdown-menu {
        z-index: 1050!important;
    }
}
.rightPanel{
    .addTask {
        .iconTaskName {
            margin: 5px 5px 0 0;
        }
        .action-buttons {
            & + .uiEditableInline  {
                margin-right: 75px;
            }
        }
        .breadcrumbCont {
            display: inline-block;
             li {
                font-weight: bold;
                .project-name{
                    color: #333;
                }
                    i {
                        font-weight: normal;
                        margin-left: 4px;
                        top: -1px;
                    }
            }

        .breadcrumb  {
            display: block;
        }
           input {
            width: 100%;
           }
        }
        .uiContentBox {
            padding-top: 8px;
        }
        .readOnly {
            cursor: default !important;
            color: #999999 !important;
            box-shadow: none !important;
        }
        a:hover.readOnly [class^="uiIcon"] {
            color: #999999;
        }
        .taskName {
            margin-top: 5px;
            .projectName {
                font-size: 18px;
                line-height: 26px;
                 word-wrap: break-word;
                 display: block;
            }
            .title-container{
                position: relative;
                .validate-action {
                    //margin-top: 6px;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    -webkit-transform: translate(0, -50%);
                    -moz-transform: translate(0, -50%);
                    -ms-transform: translate(0, -50%);
                    -o-transform: translate(0, -50%);
                    transform: translate(0, -50%);
                }
                 span {
                  &:nth-child(1){
                    margin: 8px 0 0;
                  }
                  &.projectName {
                    margin-left: 22px!important;
                    border: none;
                  }
                  &:nth-child(3){
                    margin-left: 22px; 
                  }
                }
            }
            .editable-container.editable-inline {
                margin-left: 22px;
            }
            
            input.blackLarge {
                padding: 0 4px;
            }
            .parmalink {
                margin-top: 5px;
                i {
                    vertical-align: middle;
                }
            }
        }
        .inforBar1 > .pull-left, .taskDescription, .inforBar2 {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .inforBar1 {
            > div {
                margin-right: 5px; 
                .toDo .editable-container.editable-inline {
                    display: inline-block;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
            .uiEditableInline{
                .assigned{
                    padding: 4px 0px 0px;
                    .avatarMini{
                        img{
                            margin-top: 6px;
                        }
                    }
                }
            }
            .uiEditableInline .popover {
                min-width: 252px;
                .popover-content {
                    .header {
                        &.nav-inline {
                            white-space: nowrap;
                            a {
                                padding-left: 5px;
                                margin:10px 0 10px 2px;
                                &.active {
                                    font-weight: bold;
                                }
                            }
                            a:first-child {
                                margin-left: 0;padding-left: 0;
                            }
                        }
                    }
                    .uiCalendarComponent {
                      margin-left:auto;
                      margin-right:auto;

                      hr {
                        margin: 0;
                      }
                    }
                }
            }
        }
        
        .inforBar2 .priority .editable-container.editable-inline {
            display: inline-block;
        }
        .tags {
            a {
                box-shadow: none;
            }
            > .icon-hash {
                margin-top: 8px;
                margin-right: 6px;
            }
            &.uiEditableInline .hoverStatus {
                color: #999;
            }
            &.active {
                .icon-hash {
                    display: none;
                }
            }
        }
        @media(max-width: 767px) {
            .inforBar1, .inforBar2 {
                .popover {
                    left: 0!important;
                    .arrow {
                        display: none;
                    }
                }
            }
            .inforBar1 .popover-content .header {
                display: none;
            }
            .inforBar2 {
                .rangeCalendar-container {
                    min-width: auto;
                    .choose-time {
                        display: flex;
                        flex-direction: column;
                        > div {
                            width: 100%;
                            margin-top: 10px;
                            &:nth-child(2) {
                                order: -1;
                            }
                        }
                        .form-dropdown {
                            margin: 0;
                        }
                        &.all-day .timeSelector {
                            display: none;
                        }
                    }
                }
            }
        }
    } 
    .taskAssignment .contBlock .exo-mentions .replaceTextArea {
        span {
            margin-right: 5px;
            line-height: 20px;
            &:last-child {
                margin-right: 0;
            }
        }
        &.inactive {
            background: transparent none repeat scroll 0 0;
            border: medium none;
            box-shadow: none;
            margin: 0;
        }

    }
}  
.centerPanel {
    .uiSearchInput.searchWithIcon {
        display: block;
    }
    &.span5 {
        .settingActionButtons {
             .advancedSearch-action  {
                display: inline-block;
                .action-close{
                    margin: 5px 6px 0 0;
                }
            }
        }
        .uiSearchInput   {
            display: none;
        }
        .uiHeaderBar.toggle {
             .uiSearchInput{
                display: block;
             }
            .alignBtnGroup  {
                float: left;
                width: auto;
            }
        }
        .all-task-action-toggle {
            display: none;
        }
        .all-task-action {
            display: inline-block;
            margin-top: 2px;
        }
    }
}

.uiHeaderBar.toggle {
   .label-title , .action-search  {
        display: none;
    }
    .action-close {
        display: inline-block!important;
    }
}

.table-project {
    .column-item {
        .actionIcon {
           padding: 0 2px;
           margin: 2px 0;
           .uiIconArrowRight {
            background-position: -39px -120px;
           }
           .uiIconClock {
                background-position: -160px -80px;
            }
        }
    }
    .column-checkbox{
        .status-task{
            display: inline-block; 
        }
    }
}

.rightPanel  {
    .title {
        .actionIconSmall {
            line-height: 10px;
        }
    }
    .taskDescription {
        word-wrap: break-word;
        //padding:0 15px;
    }
}

.form-create-task {
    margin-left: 25px;
    > input {
        opacity: 0.5;
        &:focus {
         opacity: 1;
        }
    }
}

//share project


.modal8{
    width: 800px;
    margin-left: -400px;
    .exo-mentions .autocomplete-menu {
        margin-top: -1px;
    }
}

.sharePrjDialog {
    width: 950px;
    margin-left: -425px;
    .savePermission {
      margin-left: 5px;
    }
    .table td {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}
.action-mentions {
    .exo-mentions {
        background: transparent;
        border-radius:0;
    }
}
.permission-owner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    .replaceTextArea {
        flex-grow: 1;
        float: left;
        height: auto;
        vertical-align: top;
        width: 0;
        padding:5px;
        margin-right: 5px;
        min-height: 26px;
        &.open {
            overflow: visible;
        }
        @media(max-width: 1024px) {
            width: 100%;
            margin-bottom: 5px;
        }
    }
}

.exo-mentions .replaceTextArea > span {
    margin: 2px 1px;
    i {
        cursor: pointer;
    }
}

.list-users .item:last-child {
    margin-bottom: 0;
}

.userSelectorDialog  {
    .uiSearch  {
        margin-top:0;
    }
}

.list-projects .no-project,
.list-labels .no-label {
    padding: 6px 0px;
}

.row-item {
    .dragable {
        width: 6px;
        height: 22px;
        background: url('../images/icons/dragable.png');
        left: 8px;
        cursor: move;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
    }
}

//comment section
.commentList {

  .subCommentBlock {
    padding-left: 50px;
  }
  .subCommentShowAllLink {
    line-height: 36px;
  }
  .commmentLeft + .commentRight {
    margin-left: 50px;
  }
  .commentRight {
    .author .date{
      margin-left: 10px;
      font-size: 12px;
      padding-right: 16px;
    }
  }

  form {
    .commmentLeft {
      display: none;
    }
    .commmentLeft + .commentRight {
      margin-left: 0px;
    }
  }

    .commentInputBox .btn {
      margin-top: 10px;
    }

    .commentItem {
        position: relative;
        margin: 10px 0 0;
        clear: both;
        .exo-mentions {
            margin-bottom: 15px;
            .replaceTextArea{
                padding: 5px 10px;
            }
        }

    }
    .contentComment {        
        word-wrap: break-word;
    }
    .controllDelete {
          cursor: pointer;
        display: none;
        position: absolute;
        right: -5px;
        top: 0;
    }
     .commentItem:hover .controllDelete {
        display: block;
    }
    .author a{
        font-weight: bold;
        word-wrap: break-word;
    }
}

.autocomplete-menu {
    li {
        position: relative;
    }
    .user-status {
        position: absolute;
        right: 7px;
        top: 7px;
    }
}

.list-changes li + li {
    margin-top: 10px;
}

.done {
    text-decoration: line-through;
}

.labels , .tags {
    margin: 5px 0;
   
}

.tags, .taskFilter {
    .label   {
        margin:1px ;
    }
}
.taskItem {
    .column-item .labels{
        .label   {
            margin:1px ;
        }
    }
}
.tags {
    .hoverStatus {
        > .label {
            float: left;
        }
    }
}
[data-currentgroupby=""] [data-groupby=""] {
  display: none;
}
[data-currentgroupby="status"] [data-groupby="status"] {
  display: none;
}
[data-currentgroupby="assignee"] [data-groupby="assignee"] {
  display: none;
}
[data-currentgroupby="project"] [data-groupby="project"] {
  display: none;
}
[data-currentgroupby="tag"] [data-groupby="tag"] {
  display: none;
}

[data-currentorderby=""] [data-orderby=""] {
  display: none;
}
[data-currentorderby="title"] [data-orderby="title"] {
  display: none;
}
[data-currentorderby="priority"] [data-orderby="priority"] {
  display: none;
}
[data-currentorderby="dueDate"] [data-orderby="dueDate"] {
  display: none;
}
[data-currentorderby="createdTime"] [data-orderby="createdTime"] {
  display: none;
}

.exo-mentions .tags{
    margin: 0;
}

.editable-pre-wrapped {
    white-space: normal;
}
.editable-container.editable-inline ,.editable-input{
    display: block;
}
.editable-container.editable-popup .popover-title {
    display: none;
}
.selectize-input {
    padding: 0 4px;
    &.has-items {
         padding: 2px 4px;
    }
    .label {
        vertical-align: middle;
        height: 14px;
        line-height: 13px;
        max-width: 200px;
        overflow: hidden;
        padding-right: 20px!important;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        .removeValue {
           font-size: 11px;
            position: absolute;
            right: 5px;
            top: 2px;
            font-weight: normal;
        }
    }
    .label + input[type="text"] {
       height: 16px;
       margin-left: 2px!important;
    }
}
.taskList {
    .heading  {
        img {
            max-width: 20px;
            border-radius: 2px;
            vertical-align: top;
            margin-right: 5px;
        }
    }
}
.prjDescription,
.taskDescription {
    ul,ol {
        margin: 10px 0 10px 25px;
        li {
            line-height: 20px;
            list-style-type: disc;
        }
    }
    ol li {
        list-style-type: decimal;
    }
}

.editable-input {
    .uiDropdownMenu li > a {
        .text-overflow();
    }
}
.editable-unsaved {
    font-weight: normal;
}


.selectize-input.replaceTextArea {
     width: 100%!important;
     height: auto;
     input {
        height: 20px !important;
     }
     &.locked {
        border-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding: 0;
     }
}

.dropdown-loading {
  display: none;
}
.exo-mentions.loading {
    .autocomplete-menu.loading {
        display: block;
    }
    .dropdown-loading {
      display: block;
    }
    &.dropdown-opened {
      .autocomplete-menu.loading {
        display: none;
      }
    }
}
.choose-time {
  &.all-day .timeSelector{
    visibility: hidden;
  }
}

.inforBar2 {
    & > .pull-left {
        margin-right : 14px;
    }
    .priority {
        margin-right: 0
    }
}

.rangeCalendar-container {
    min-width: 470px;
    strong {
        text-transform: capitalize;
        display: block;
        margin-bottom: 5px;
    }
}

.title-container{
    
}
.title-task {
    margin-left: 20px;
}
.noMatch {
    padding: 5px 0;
}
.pull-right + .date-work-plan {
    margin: 0 28px 0 0 ;
}

.fieldWorkPlan {
    & > .pull-right  {
         .removeWorkPlan  {
            margin-top: 4px;
         }
    }
    .pull-right .removeWorkPlan{
        display: none;
    }
    &:hover {
        .pull-right .removeWorkPlan{
            display: block;
        }
    }
}
.date-work-plan {
    .hoverStatus {
        margin-left: 20px;
    }
    .uiIconPLFCalendar  {
        margin-top: 8px;
    }
}

.dueAlertWarning {
   clear: both;
   margin-bottom: 2%;
   margin-top: 10%;
}

.taskName .permalink.taskPermalink {
    margin-top: 6px;
}

.date-work-plan .popover-title {
    display: none;
}

.projectName {
    word-wrap: break-word;
}
.removeWorkPlan,.controllDelete  {
    padding: 0 2px;
}
.list-changes {
    .date {
        font-size: 12px;
    }
}

.commentBox .exo-mentions .autocomplete-menu li.msg {   
    white-space: normal;
}

.inforBar2 + .uiTabPane {
    margin-top: 15px;
}
.uiTabPane {
  .commentRight ul {
    li {
      list-style-type: disc;
      margin-left: 25px;
    }
  }
}
.nodeGroup {
  li.node.collapsed {
    > .childrenContainer {
      display: none;
    }
  }
}
.exo-mentions {
  .autocomplete-menu li {
    text-overflow: ellipsis;
  }
}
.exo-mentions .replaceTextArea {
    padding: 0 5px;
  .groupMembership {
    display: inline-block;
    position: relative;
    height: 27px;
    margin: 2px 3px 0 0;
    > span {
      background: #e2eafa;
      border-radius: 3px;
      color: #215ab2;
      border: 1px solid #215ab2;
      padding: 1px 16px 1px 5px;
      display: inline-block;
      position: relative;
    }
    .dropdown-toggle{
        padding: 1px 5px;
    }
    span .removePermission{
        right: 4px;
    }
  }
  .cursorText {
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 2px;
    width: auto;
    height: 20px;
    input {
      display: inline;
      width: 10px;
      border: none;
      outline: none;
      box-shadow: none;
      margin: 2px 0 0;
      height: 22px;
      padding: 0;
    }
  }
  span + .cursorText{
    top: -3px;
  }
}
.header-right .action-bar + .action-bar {
    margin-right: 2px;
}

.new-col {
    padding-left: 8px!important;
}

.leftPanel  {
   &.uiAccordion {
       
    }
}

.taskBoardView {
    overflow-x: auto;
    .body.relative {
        min-width:650px;
    }
    .heading {
        .label {
           vertical-align: 1px;
        }
    }
    .table-project-collapse{
        .caption-heading{
            .hover-action-reveal{
                background: #545454;
                padding: 10px 24px;
                border-radius:3px 5px 5px 3px;
                outline: 1px solid white;
                position: relative;
                color: white;
                text-align: center;
                word-wrap: break-word;
                .editable{
                    font-size: 14px;
                }
                .uiIconDelete{
                    position: absolute;
                    right: 10px;
                    top: 13px;
                    &:hover{
                        background-position: -21px -1px;
                    }
                }
                .number-tasks{
                    background: #4f72ac;
                    border-radius: 3px;
                    padding: 1px 6px;
                    font-size: 11px;
                    vertical-align: top;
                    margin-left: 3px;
                }

            }
            .hover-action-reveal:nth-last-child(2){
                padding: 10px 32px 10px 18px;
                border-radius:3px;
                .uiIconDelete{
                    position: absolute;
                    right: 30px;
                }
                .uiIconPlus{
                    position: absolute;
                    right: 10px;
                    top: 13px;
                    &:hover{
                        background-position: -101px -61px;
                    }
                }
            }
            + .heading{
                margin-top: 10px;
            }
        }
        .col-new {
            .formCreateNewStatus {
                width: 78%;
            }
            .actionRemoveStatus {
                display: block;
                margin-top: 3px;
            }
        }
        .taskItem{
            .col + .col{
                border-left: 1px dashed #cfcfcf;
            }
            .createTaskInListView{
                input[type="text"]{
                    border-radius: 0;
                }
            }
            .box-small {
                background: #f6f6f6; 
                color: #333333;
                margin-top: 10px;
                .priority-high{
                    background: #f09c93;
                }
                .priority-normal{
                    background: #fadd96;
                }
                .priority-low{
                    background: #c2ecbf;
                }
                .priority-none{
                    background: #dedede;
                }
                .box-small-inner{
                    border: 1px solid transparent;
                    &:hover{
                        border: 1px solid #dedede;
                        background: #f6f6f6; 
                    }
                }   
            }
            .box-small.selected{
                .box-small-inner{
                    .uiIconValidate{
                        display: block;
                    }
                    &:hover{
                        background: #d8e9f2; 
                    }
                }   
            }
            .box-small.task-done{
                .box-small-inner{
                    .uiIconBlue{
                        display: block;
                    }
                    .taskName{
                        text-decoration: line-through;
                    }
                }
            }
            .date-task{
                color: #999;
                margin-top: 4px;
            }
        }
        .user-name-task{
            font-weight: bold;
        }
        .group-name{
            border-radius: 4px;   
            font-size: 11px;
            padding: 4px 6px;
            color: white;
        }
        .no-label, .null{
            background: #999;
        }
        
    }
    .uiEditableInline.active  {
        .number-tasks,.actionRemoveStatus,.actionAddStatus {display: none!important;}
    }
}

.taskBoardContainer {
    position: relative;
    .draggableHighlight {
      height: 1.5em;
      line-height: 1.2em;
       background: url("/eXoSkin/skin/images/themes/default/Container/DragAndDropPreview4x4.gif") repeat  0 0;
    }
    .draggableFullContainer {
      position: absolute;
      height: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      background: url("/eXoSkin/skin/images/themes/default/Container/DragAndDropPreview4x4.gif") repeat  0 0;
    }
}

.collapseSubProject, .collapseSubLabel {
    left: 10px;
    position: absolute;
    top: 5px;
}
.uiAccordion.leftPanel .accordion-heading .sub-item .project-name,
.uiAccordion.leftPanel .accordion-heading .sub-item .label-name {
    padding-left: 30px;
    .badgeDefault.mini{
        margin-top: 5px;
    }
}

.table-project .column-checkbox .status-task.block-hide {
    margin-left: 8px;
}

.table-project .column-time {
    width: 27px;
}

.breadcrumb .removeProject {
    display: inline;
    float: none;
}

.sharePrjDialog {
    .table {
        tr td {
            width: 50%;
        }
    }
    .exo-mentions {
      position: static;

      .autocomplete-menu {
        width: 48%;
        right: 0;
        left: auto;
      }
    }
}

.form-add-label {
    padding: 5px 20px;
    .input-add-label {
        max-width: 100%;
        margin: 5px 0;
    }
}
.uiEditableInline .highlight {
  font-weight: bold;
}

// add new project popup
.addProject {
	.popupContent {
		padding-top: 10px!important;
	}
	.breadcrumbCont, .inputName, .prjAuthor, .prjDescription {
		margin: 0 0 10px;  
	}

	.breadcrumbCont {
		position: relative;
		input {
			width: 100%;
		}

	}
	.prjAuthor { 
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		line-height: 30px; 
		.avatarSmall {
			font-weight: bold;
		}
	} 

	.inputName {
		font-size: 18px;
		line-height: 26px;
	}
	.viewInCal {
		padding: 7px 28px;
	}
	.uiGroupBoundCheckBox {
		margin: 10px 0;
	}
}
.taskFilter{
    .form-horizontal .control-group {
        .control-label{
            width: 80px;
            text-align: left;
        }
        .controls{
            margin-left: 85px;
            line-height: 10px;
            input{
                width: 100%;
            }
            select{
                width: 50%;
            }
            .multi {
                width: 100%;
                .selectize-input{
                    padding: 2px 4px;
                }
            }
        }
    }
}
.actionIcon.hideFilter {
    margin-top: -1px;
    .uiIconClose{
        top: -2px;
    }
}
.task-completed {
  .taskName {
    text-decoration: line-through;
  }
}
.inputUser {
  &.disabled [data-action="assign"] {
    display: none;
  }
}

@media(min-width: 480px) {
  .commentList {
    form {
      .commmentLeft {
        display: block;
      }
      .commmentLeft + .commentRight {
        margin-left: 50px;
      }
    }
  }
}

// Select image from existing sources PopUP
#UIPopupComposer {
    .PopupContent {
        padding: 0;
        .uiActionBorder {
            margin: 0;
            padding: 15px;
        }

        .uiAction {
            padding-top: 5px;
            margin: 0;
        }

        .limitMessage {
            text-align: left;
            line-height: 30px;
            color: #555;
        }
    }

    .popupHeader {
        padding: 12px 10px 12px 15px;
        .uiIconClose {
            top: 12px;
        }
    }
}

#UIDocumentSelectorTab {
    .breadcrumbContainer {
        display: inline-block;
        padding: 5px 20px;
        border-bottom: 1px #ccc solid;
        box-sizing: border-box;
        line-height: 33px;
        width: 100%;
        .breadcrumb {
            margin: 6px 0;
            display: flex;
            .backBTN {
                display: none;
            }

            > li {
                height: 21px;
                max-width: 100px;
                display: flex;
                a {
                    float: initial;
                }
            }

            .uiIconMiniArrowRight {
                margin: 7px 5px 5px 5px;
            }

            .active {
                color: #2f5e92;
                max-width: 100px;
            }
        }

        .searchBox {
            width: 150px;
            position: relative;
            > input {
                width: 100%;
                margin: 0;
                padding: 0 0 0 6px;
            }

            > a {
                position: absolute;
                right: 5px;
                top: 4px;
            }
        }
    }

    .selectionBox {
        height: 350px;
        max-height: 350px;
        overflow: auto;
        padding: 5px;
        background-position-y: -50px;
        background-size: 100%;
        background-repeat: no-repeat;

        h4 {
            margin-left: 20px;
        }

        .driveData , .folderSelection , .fileSelection {
            display: inline-table;
            text-align: center;
            border: 1px transparent solid;
        }

        .folderSelection , .fileSelection {
            margin: 5px;
            width: 95px;
            padding: 0;
        }

        .driveData {
            margin: 0 5px;
            width: 114px;
            padding: 20px;
        }

        .center {
            margin: auto;
            padding: 2px;
            text-align: center;
            word-break: normal;
        }

        .selectionLabel {
            padding-top: 2px;
            display: block;
            padding: 0;
            color: #000;
        }

        .folderSelection .selectionIcon {
            padding-bottom: 2px;
            font-size: 55px;
        }

        .driveData .selectionIcon {
            padding-bottom: 2px;
            font-size: 55px;
        }

        .fileSelection .selectionIcon {
            display: inline-block;
            height: 55px;
            width: 55px;
            margin-top: 2px;
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .fileSelection.selected {
            border: 1px #2f5e92 solid;
            background-repeat: no-repeat;
            background-position-x: 102%;
            background-position-y: -2px;
            background-image: url("@{images-path}/social/skin/Activity/selectedDocument.gif");
        }

        .truncate {
            max-width: 90px;
            width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .emptyFolder, .emptyResults {
        margin: auto 0;
        line-height: 50px;
        display: block;
        text-align: center;
        vertical-align: middle;
        font-size: 1.5em;
        color: black;
        white-space: pre-line;
        display: none;
        background-position-x: 50%;
        background-repeat: no-repeat;
        margin-top: 15%;
        padding-top: 45px;
    }

    .emptyFolder {
        background-image: url("@{images-path}/social/skin/Activity/emptyfolder.png");
    }

    .emptyResults {
        background-image: url("@{images-path}/social/skin/Activity/noresult.png");
    }

    .fileAlreadySelected {
        position: absolute;
        width: 75%;
        opacity: 0.9;
    }
}

.uiBgd64x64FileDefault {
    background-image: url("@{images-path}/Icons/TypeIcons/EmailNotificationIcons/uiIcon64x64FileDefault.png");
}
.uiBgd64x64imagepng {
    background-image: url("@{images-path}/Icons/TypeIcons/EmailNotificationIcons/uiIcon64x64FilePng.png");
}
.uiBgd64x64imagejpeg {
    background-image: url("@{images-path}/Icons/TypeIcons/EmailNotificationIcons/uiIcon64x64FileJpg.png");
}
.uiBgd64x64imagegif {
    background-image: url("@{images-path}/Icons/TypeIcons/EmailNotificationIcons/uiIcon64x64FileGif.png");
}

@media (max-width: 480px) {
    #UIPopupComposer .PopupContent {
        .uiAction {
            clear: both;
            width: 100%;
        }

        .limitMessage {
            display: none;
        }
    }

    #UIPopupComposer .PopupContent .uiAction button {
        display: block;
    }

    #UIDocumentSelectorTab .selectionBox {
        height: 50vh;
        max-height: 50vh;
        .driveData {
            width: 90px;
        }
    }

    #UIDocumentSelectorTab .breadcrumbContainer {
        .breadcrumb {
            .normal {
                display: none;
            }

            .backBTN {
                display: inline-block;
                padding-top: 2px;
                padding-right: 5px;
            }

            .uiIconMiniArrowRight {
                display: none;
            }
        }

        .searchBox {
            clear: both;
            width: 100%;
            text-align: center;
            > input {
                width: 98%;
            }
        }
    }
}
