body, html {
  height: 100%; }

body {
  height: 100%;
  min-height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px; }

body * {
  box-sizing: border-box;
  outline: none; }

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

:visited {
  color: inherit; }

a {
  cursor: pointer; }

aside {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  padding-top: 20px;
  background-color: #2b3237; }

.top-menu > li {
  height: 90px;
  margin: 0 auto;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-transform: capitalize;
  color: #515356;
  border: 4px solid transparent; }
  .top-menu > li:hover, .top-menu > li.active {
    color: #fff;
    border-left-color: #FF4C4C; }
    .top-menu > li:hover .icon, .top-menu > li.active .icon {
      background-position-y: -59px;
      -ms-background-position-y: -59px; }
.top-menu .account:after {
  background-color: #FF4C4C !important; }
.top-menu .account:hover {
  border-left-color: transparent; }
.top-menu .account .avatar {
  display: inline-block;
  overflow: hidden;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff; }
.top-menu .icon-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  transform: scale(0.9); }
.top-menu .icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../i/menu_icons.png) 0 0 no-repeat; }
.top-menu .divider {
  height: auto;
  margin: 15px 0;
  cursor: default;
  border-color: transparent; }
  .top-menu .divider:hover {
    border-color: transparent; }

.unread-news {
  position: relative; }
  .unread-news:after {
    position: absolute;
    top: -8.3333333333px;
    right: 5px;
    display: block;
    width: 25px;
    height: 25px;
    font-size: 14px;
    line-height: 25px;
    content: attr(data-unread);
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background-color: #d4d4d4; }

.board-link .icon {
  width: 43px;
  height: 43px;
  background-position: 0 -2px; }

.projects-link .icon {
  width: 33px;
  height: 27px;
  background-position: -61px -2px; }

.settings-link .icon {
  width: 42px;
  height: 42px;
  background-position: -122px -2px; }

.dots {
  margin: 0;
  padding: 0;
  font-size: 0; }
  .dots li {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 3px;
    border-radius: 50%;
    background-color: #515356; }

.board {
  min-height: 100%;
  padding-left: 100px;
  background-color: #f1f1f1; }

.top-bar {
  overflow: hidden;
  padding: 20px 20px; }
  .top-bar a {
    text-align: center;
    vertical-align: middle; }

.update {
  display: inline-block;
  float: left; }

.online {
  float: right; }

.refresh, .expand, .add, .tasks .find, .tasks .expand {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 50%;
  background: #FF4C4C url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPCAMAAAA1b9QjAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAvVBMVEX////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////jSrqQAAAAPnRSTlMABme88u5jBDPc1y819N6QdZLg8Qvf/XB72nJ6X8oCA/yLlffUG3im5CTvsh0WQvNxCeePdJEwNNkIZsC9ZZX+maoAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAApElEQVQY00WP5xKCMBCED4NEwAYRFSzYe6/Y9v0fywTCsH+y883m9o5IySgxE2VmcdKq2MjkuBmo1oB6o+n5gEhRK0C7o/K8C4TKRECkv/eAvnwGCIea8ACMKB5hnFeQB0ETAUxnc00WAMVLYLUuMhu53bYA3FdzyNjRXhNZb6XmcDypNi7LnfSQ8wWwr7d7IHd+ZOFnou9K3Hzi6/0xIb4/Q/o/B6YVDGGXQOAAAAAASUVORK5CYII=') 8px 10px no-repeat;
  background-color: #FF4C4C; }

.dash, .users-online, .select, .tasks .project-name, .tasks .subtask .sub-date {
  display: inline-block;
  min-width: 114px;
  height: 35px;
  padding: 0 13px;
  font-weight: bold;
  line-height: 34px;
  cursor: pointer;
  vertical-align: middle;
  text-transform: capitalize;
  color: #515356;
  border: 1px solid rgba(163, 163, 163, 0.53);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.52); }
  .dash:hover, .users-online:hover, .select:hover, .tasks .project-name:hover, .tasks .subtask .sub-date:hover {
    background-color: #DFDFDF;
    box-shadow: inset 0 1px 0 0 #f5f5f5; }

.content {
  border: 1px solid #d3d6d9;
  box-shadow: inset 0 1px 0 #fff; }

.expand {
  background: #aacc4e url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGBAMAAAAI3hL1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJ1BMVEX///////////////////////////////////////////////////9Ruv0SAAAADHRSTlMAyeYt5Osy5fE3JN3V+Oj2AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAC1JREFUCNdjEDJgYFZk8AljSD3CYH5iZo8zA5dPx5EFDAxLzngxMDBw7V7AAACjEQn6U/Uv+gAAAABJRU5ErkJggg==') 13px 15px no-repeat; }

.users-online {
  padding-right: 40px;
  padding-left: 40px;
  font-size: 14px;
  text-transform: uppercase;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGBAMAAAAI3hL1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEX///+kpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT///8atjFHAAAADHRSTlMAyeYt5Osy5fE3JN3V+Oj2AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAC1JREFUCNdjEDJgYFZk8AljSD3CYH5iZo8zA5dPx5EFDAxLzngxMDBw7V7AAACjEQn6U/Uv+gAAAABJRU5ErkJggg==') 165px 13px no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABU1BMVEW6urr///+6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urr///83YY3mAAAAb3RSTlMAAAJMpuP7/eevWgUrzv7SrKrK/Ns8PvWMGhF79lYS6PE7LOQihFw9o9nfAcGoiPqrkenX9wpyf18I2hlP5fKKvDULB0HrL4IDwmTWsRxZSuKGouqwfCqQ4LTUlEhYW3QXQGAuKU7A+fBoBBAJXrsnggKcAAAAAWJLR0QB/wIt3gAAAAlwSFlzAAALEgAACxIB0t1+/AAAAPBJREFUGNNNz+k3AmEUBvDnHbyGxCgkBmMNg7KEVLaKbNllzb5lef7/b945lZn74Z5zf/fce+4FAK2uvkE26k3NPlUIoVKLn61tRnsgyI7OCnWFgt1h1UFPryn7HOofsAZRjaFhc0TRKMfwHxGOK5qYtF3CVEgTkNMewQzDAtGYl2Yd8s/5XLHnF+ICi1xyaZkMxJFYYbImKTMdWV0D1i1b29gEMtkYc1vYTiNv7ezukTldkvsHQIE4JHl0fHJqnp1fOMPFS1xd39zmgTuWKj/JezxUVxdplB4LT898cQ94fXtn9EPnp/f08lf5+8f4/QOXNCcfiL8LAQAAAABJRU5ErkJggg==') 12px 7px no-repeat; }

.tabs-head {
  float: left; }
  .tabs-head li {
    position: relative;
    float: left;
    height: 60px;
    margin-top: -1px;
    margin-left: -1px;
    padding: 0 75px;
    font-size: 18px;
    line-height: 60px;
    cursor: pointer;
    text-align: center;
    text-transform: capitalize;
    color: #4c4c4c;
    border: 1px solid #d3d6d9;
    border-top-right-radius: 6px;
    background-color: #f8f8f8;
    box-shadow: inset 0 1px 0 #fff; }
    .tabs-head li:before {
      position: absolute;
      top: 11px;
      left: 21px;
      display: block;
      width: 42px;
      height: 42px;
      content: '';
      background: url(../i/menu_icons.png) -305px 1px no-repeat; }
    .tabs-head li:after {
      top: 8px;
      right: 47px;
      font-weight: bold;
      background-color: #FF4C4C; }
    .tabs-head li:first-child {
      border-left: none; }
    .tabs-head li.active {
      border-bottom-color: #fff;
      border-radius: 0;
      background-color: #fff; }
      .tabs-head li.active:after {
        background-color: #d4d4d4; }
  .tabs-head .messenger:before {
    width: 42px;
    background-position: -369px 5px; }

.search {
  float: right;
  padding: 10px 0; }
  .search input {
    box-sizing: border-box;
    width: 364px;
    margin: 0;
    margin-right: 20px;
    padding: 0 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 35px;
    color: #c0c0c0;
    border: 0;
    background-color: transparent;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.31); }
    .search input:focus {
      color: #515356;
      outline: 1px dotted;
      background-color: #f9f9f9; }

.tabs-content {
  clear: both;
  overflow: hidden;
  padding: 20px 20px;
  background-color: #fff; }

.tab {
  display: none;
  height: 100%; }
  .tab.active {
    display: block; }

.main-content {
  float: left;
  width: 70%;
  padding-right: 20px; }

.users-activity {
  float: right;
  width: 30%; }

.content-container, .users-activity-container {
  position: relative;
  overflow: hidden;
  height: 1000px;
  border: 1px solid rgba(163, 163, 163, 0.53);
  border-radius: 4px;
  box-shadow: -1px 1px 4px rgba(1, 1, 1, 0.1); }

.user-actions {
  overflow-y: auto;
  height: 953px; }
  .user-actions li {
    padding: 20px 20px;
    padding-right: 10px;
    border-bottom: 1px solid rgba(163, 163, 163, 0.53); }
    .user-actions li:last-child {
      border: 0; }
    .user-actions li:hover {
      background-color: #F1F1F1; }

.user {
  position: relative; }
  .user:before {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    content: '';
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #9b9b8c; }
  .user.on:before {
    background-color: #aacc4e; }
  .user .pic {
    position: relative;
    z-index: 10;
    float: left;
    overflow: hidden;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border-radius: 50%; }
  .user .description {
    margin-bottom: 9px;
    color: #4c4c4c; }
  .user .name {
    font-weight: 600;
    text-transform: capitalize; }

.date {
  font-size: 12px;
  text-transform: uppercase;
  color: #c7c7c7; }
  .date .day, .date .am {
    font-weight: bold; }

.archive {
  position: absolute;
  z-index: 10000;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 47px;
  padding: 15px 20px;
  cursor: pointer;
  text-transform: capitalize;
  border-top: 1px solid rgba(163, 163, 163, 0.53);
  background-color: #fff; }
  .archive:hover {
    background-color: #DFDFDF; }
  .archive span {
    position: relative; }
    .archive span:after {
      position: absolute;
      top: 1px;
      right: -17px;
      display: inline-block;
      width: 15px;
      height: 19px;
      content: '';
      transform: rotate(-90deg);
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGBAMAAAAI3hL1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEX///+kpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT///8atjFHAAAADHRSTlMAyeYt5Osy5fE3JN3V+Oj2AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAC1JREFUCNdjEDJgYFZk8AljSD3CYH5iZo8zA5dPx5EFDAxLzngxMDBw7V7AAACjEQn6U/Uv+gAAAABJRU5ErkJggg==') 2px 7px no-repeat; }

.search-projects {
  overflow: hidden;
  padding: 20px 20px;
  border-bottom: 1px solid rgba(163, 163, 163, 0.53); }
  .search-projects input {
    box-sizing: border-box;
    width: 400px;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 35px;
    color: #c0c0c0;
    border: 0;
    background-color: transparent;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.31); }
    .search-projects input:focus {
      color: #515356;
      outline: 1px dotted; }
  .search-projects .direction {
    font-weight: normal; }

.options {
  float: right; }
  .options div {
    vertical-align: middle; }

.add {
  margin-right: 0;
  margin-left: 5px;
  background: #FF4C4C url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALBAMAAABbgmoVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMAhfP8+fRAA2d/AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAC9JREFUCNdjYGAQEmAAATMHMJWWgKCE09LSkgUYwoBUmgKDCJBMEUBTAtcnCpQBAHmSCcy6lX4nAAAAAElFTkSuQmCC') 12px 12px no-repeat; }

.select {
  padding-right: 35px;
  padding-left: 20px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGBAMAAAAI3hL1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEX///+kpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT///8atjFHAAAADHRSTlMAyeYt5Osy5fE3JN3V+Oj2AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAC1JREFUCNdjEDJgYFZk8AljSD3CYH5iZo8zA5dPx5EFDAxLzngxMDBw7V7AAACjEQn6U/Uv+gAAAABJRU5ErkJggg==') 221px 15px no-repeat; }
  .select:hover {
    background-color: #DFDFDF; }

.tasks {
  overflow-y: auto;
  height: 873px; }
  .tasks li {
    border-bottom: 1px solid rgba(163, 163, 163, 0.53); }
    .tasks li:last-child {
      border-bottom: none; }
  .tasks .task-description {
    padding: 20px; }
  .tasks .task-total {
    display: inline-block;
    height: 34px;
    margin-right: 6px;
    padding: 0 10px;
    line-height: 33px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background-color: #FF4C4C; }
  .tasks .task-title {
    display: inline-block;
    font-size: 18px;
    font-weight: normal;
    color: #515356; }
  .tasks .percentage {
    font-size: 18px;
    font-weight: bold; }
  .tasks .task-info {
    float: right; }
    .tasks .task-info > div {
      display: inline-block;
      margin-left: 5px;
      vertical-align: middle; }
      .tasks .task-info > div:hover {
        background-color: #DFDFDF; }
  .tasks .find, .tasks .expand {
    width: 33px;
    height: 33px;
    margin-right: 0;
    border: 1px solid rgba(163, 163, 163, 0.53);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .tasks .find {
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAclBMVEX///+kpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT///+1lni0AAAAJHRSTlMAA2/V/va2Oa6wbn7Z+1ZcB7IZFfl3zKHdlNg9Veh7V3h1+qhjVY5sAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAGdJREFUCNc9ikcSgDAMAw0hlNBD783/fyMyDOiw1mpM5LjK035AEifkyMRJmokYzsGi1BZHRc9DVTegZx6htgN0/Eo/AP5YSJ94BoO0rNAXXmXbdN32jOxitumGeYUd9GVnPn+h47xufTIGKXPhGQwAAAAASUVORK5CYII=') 10px 10px no-repeat; }
  .tasks .expand {
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGBAMAAAAI3hL1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEX///+kpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT///8atjFHAAAADHRSTlMAyeYt5Osy5fE3JN3V+Oj2AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAC1JREFUCNdjEDJgYFZk8AljSD3CYH5iZo8zA5dPx5EFDAxLzngxMDBw7V7AAACjEQn6U/Uv+gAAAABJRU5ErkJggg==') 10px 13px no-repeat;
    cursor: no-drop;
    transition: transform 0.3s ease; }
  .tasks .hassubs .expand {
    cursor: pointer; }
  .tasks .project-name {
    height: 33px;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    text-transform: uppercase; }
    .tasks .project-name:hover {
      box-shadow: none; }
  .tasks .subtask {
    height: 0;
    padding: 0 20px;
    border-bottom: none;
    border-top: 1px solid rgba(163, 163, 163, 0.53);
    background-color: #f5f5f5;
    margin-bottom: -1px;
    overflow: hidden;
    transition: all 0.3s ease; }
    .tasks .subtask .task-total {
      background-color: transparent;
      border: 1px solid rgba(163, 163, 163, 0.53);
      color: #d4d4d4; }
    .tasks .subtask .find {
      background-color: transparent; }
    .tasks .subtask .pic {
      margin-right: 0; }
    .tasks .subtask .user:hover {
      background-color: initial; }
  .tasks .opened .subtask {
    height: 75px;
    padding: 20px;
    margin-bottom: 0; }
  .tasks .opened .expand {
    transform: rotate(180deg); }

.tab2-content {
  padding: 20px; }
  .tab2-content p {
    margin: 10px 0;
    line-height: 1.5;
    text-indent: 25px; }

[data-tooltip] {
  position: relative; }
  [data-tooltip]:after, [data-tooltip]:before {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 3s; }
  [data-tooltip]:after {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    display: inline-block;
    min-width: 100px;
    max-width: 170px;
    padding: 8px 12px;
    font-size: 13px;
    content: attr(data-tooltip);
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.2;
    color: #fff;
    border-radius: 4px;
    background-color: #2b3237;
    text-transform: none;
    font-weight: normal; }
  [data-tooltip]:before {
    position: absolute;
    bottom: calc(100%);
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    content: '';
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2b3237;
    border-bottom: none; }
  [data-tooltip]:hover:after, [data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible; }