//@import 'less/bootstrap.less';
@import 'bootstrap.css';
@import 'less/clearfix.less';
@import 'less/gradients.less';
@import 'animation.less';
@import '../fonts/themify/themify-icons/themify-icons.css';
@import 'dashboard-calendar.css';
@import '../fonts/task-icons/css/styles.css';

.box-shadow-2(@shadow: 0 1px 3px rgba(0, 0, 0, .25), @shadow2: 0 -1px 1px rgba(255, 255, 255, .25)) {
  -webkit-box-shadow: @shadow, @shadow2;
  -moz-box-shadow: @shadow, @shadow2;
  box-shadow: @shadow, @shadow2;
}

.border-radius(@radius) {
  border-radius: @radius;
}

@sidebarWidth: 200px;
@sidebarTextColor: #383F45;
@border-color: #e1e6ef;
@activeTextColor1: #2381e9;
@itemHoverBackgroundColor: #ebf2fb;
@itemHoverTextColor: #328ff1;
@itemHoverBackgroundColor2: #77d165;
@itemHoverTextColor2: #77d165;
@currentUserBackgroundColor: #e9edf4;
@font-family: Arial, sans-serif;
@sidebarActiveColor: #7096E7;
@primaryActionColor: #55ACEF;

@green-button-color: #58cf2c;
@active-blue: #259af4;
/* apply a natural box layout model to all elements */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@text-color: #A5ACB6;
@darker-text-color: #3D4651;
@dark-blue: #3C4F66;
@bluish-grey: #606F82;
@bright-blue: #5AB7FD;
@other-bright-blue:#27AAFD;

/* mixin for multiline */
.multi-line-ellipsis(@lineHeight: 1.2em, @lineCount: 1, @bgColor: white) {
  overflow: hidden;
  position: relative;
  line-height: @lineHeight;
  max-height: @lineHeight * @lineCount;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: @bgColor;
  }
}

body {
  font-size: 16px;
  font-family: @font-family;
  color: @text-color;
}

.right {
  float: right;

}

.left {
  float: left;
}

html {
  height: 100%;
  width: 100%;
}

/** Reused Classes **/
.link {
  color: #428bca;
  &:hover {
    color: #2a6496;
    text-decoration: underline
  }
}

.modal-window-base {
  border-radius: 4px;
  -webkit-background-clip: border-box;
}

.modal-basic {
  .modal-window-base;
  box-shadow: 0 0 10px rgba(87, 117, 161, .25);

  position: relative;
}

ul {
  padding-left: 0;
}

#app-wrapper {
  height: 100%;
  overflow: hidden;
}

@panel-info-height: 60px;
@panel-separator-color: @border-color;

.basic-button, input[type=submit] {
  background-color: #fcfcfd;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
  display: inline-block;
  cursor: pointer;
  color: rgba(43, 50, 57, 0.65);

  border: 1px solid #cecece;

  &.disabled, &.disabled:hover {
    opacity: .6;
    cursor: not-allowed;
  }

  &.large {
    padding: 10px 20px;
  }

  &:hover {
    box-shadow: 0 1px 2px rgba(43, 50, 57, 0.08);
    border: 1px solid #bdbdbd;
  }

  &[disabled=disabled] {
    opacity: .5;
    cursor: not-allowed;
  }
}

.button.blue:hover, input[type=submit]:hover {
  border: 1px solid #458CCF;
  box-shadow: inset 0 0 0 1px #458CCF;
  background: rgba(69, 140, 207, 0.05);
  color: #458CCF !important;
}

.icon, .icon-white {
  display: inline-block;
  vertical-align: text-top;
  font-size: 17px;
  color: #444;

}

.clickable .icon {
  opacity: .5;

  &:hover {
    opacity: .5;
  }
}

.icon-white {
  background-image: url("../images/glyphicons-halflings-white.png") !important;
}

.clickable {
  cursor: pointer
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-left: 4px solid black;
  content: "";

}

.open .caret, .caret-down {
  border-bottom: 4px solid transparent;
  border-top: 4px solid black;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.collapsible {

  .collapse {
    display: none;
    padding-left: 20px;
  }

  h5 {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #eee;
  }

  .caret {
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
  }

  &.open {

    h5 {
      box-shadow: 0 4px 4px rgba(0, 0, 0, .02);
      margin-bottom: 20px;
    }

    .caret {
      margin-top: 14px;
    }

    .collapse {
      display: block;
    }
  }
}

.user-reference {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  padding: 2px 6px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  background: #107dac;
  text-shadow: 0 -1px 0 #0c6084;
  .border-radius(4px);
  box-shadow: 1px 1px 1px darken(#107dac, 10%);

  span {
    font-weight: normal;
  }
}

.user-image {
  display: block;
  height: 32px;
  width: 32px;
  background: transparent url(../images/unknown-user.jpg) no-repeat center center scroll;
  background-size: 100% 100%;
  border-radius: 50%;
  overflow: hidden;

  img {
    width: 100%;
  }

  &.user-image-large {
    height: 100px;
    width: 100px;
  }
}

.flat-button {
  #gradient .vertical(#f5f5f5, #f1f1f1);
  border: 1px solid #DCDCDC;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin-right: 16px;
  height: @button-set-height - 1;
  line-height: @button-set-height - 2;
  min-width: 54px;
  outline: 0;
  padding: 0 12px;
  display: inline-block;
  margin: 4px 0 0 0;
  vertical-align: top;
  color: #444;

  &:hover {
    #gradient .vertical(#4D90FE, #4787ED);
    border: 1px solid #3079ED;
    color: #fff;
  }

  &.danger:hover {

    color: #fff;
  }

  &.static:hover {
    #gradient .vertical(#f5f5f5, #f1f1f1);
    border: 1px solid #DCDCDC;
    color: #444;
  }
}

.disable-selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@on-time-color: #54DC83;
@overdue-color: #FF5A59;
@at-risk-color: #FEC748;

body {
  height: 100%;
  width: 100%;
  //    background: #eee url(../images/cream_dust.png) repeat 0 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.header-notification {
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  float: left;
  padding: 0 30px 0 10px;
  border: 1px solid #e8d38d;
  border-radius: 3px;
  margin: 3px 20px;
  #gradient .vertical(#FFFBE0, #f5eebe);

  a {
    color: #67a4cc;
  }

  &:hover {

    #gradient .vertical(#f6f2d8, #F3EBCD);
  }

  .close {
    padding: 4px;
    cursor: pointer;
    font-size: 10px;
    font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
    position: absolute;
    top: 0px;
    right: 5px;
    height: 12px;
    width: 12px;
    line-height: 12px;
  }
}

.full header {
  box-shadow: none;
}

footer {
  display: none;
}

#sidebar-menu {
  display: none;
  width: 175px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 49px;
  margin-left: -17px;

  &:before {
    content: "";
    position: absolute;
    right: 50%;
    top: -12px;
    margin-right: -17px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #fff transparent;
    z-index: 9999;
  }
  &:after {
    content: "";
    position: absolute;
    right: 50%;
    top: -13px;
    margin-right: -18px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13px 13px 13px;
    border-color: transparent transparent rgba(0, 0, 0, .2) transparent;
    z-index: 9998;
  }
}

#sidebar-wrapper.menu-showing {
  #sidebar-menu {
    display: block;
  }
}

#projects-list {
  padding: 100px 20px;
  list-style: none;

  li {
    line-height: 20px;
    margin: 10px 0;
    padding: 6px 10px 6px 27px;
    border-radius: 4px;
    position: relative;

    &:hover a {
      color: @darker-text-color;
    }

    &.selected {
      background: #7ACAF5;
      a {
        color: #fff;
      }
    }

    &:before {
      content: ' ';
      position: absolute;
      height: 12px;
      width: 12px;
      top: 50%;
      left: 0px;
      margin-top: -6px;
      border-radius: 50%;
      border: 1px solid #7ACAF5;
      //background: #7ACAF5;

    }
  }

  a {
    color: @text-color;
    text-decoration: none;
  }
}

#help-button {
  background: url(../images/help.svg) no-repeat center center;
  background-size: 30px;
  height: 50px;
  width: 50px;
  opacity: .2;
  bottom: 0px;
  left: 0;
  position: absolute;
  transition: opacity .4s linear;
  cursor: pointer;

  &:hover {
    opacity: .7;
  }
}

#support-message {
  max-width: 700px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 auto;
  padding: 60px 40px;
  p {
    color: #22282B;
    font-size: 16px;
  }
  label {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 50px;
    color: #85939d;
    display: block;
  }

  textarea {
    display: block;
    width: 100%;
    height: 200px;
    font-size: 16px;
    margin-bottom: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
  }
}

#get-help {
  max-width: 800px;
  margin: 0 auto;

  #support-message, #contact-sent, #contact-error {
    display: none;
  }

  #contact-sent, #contact-error {
    text-align: center;
    padding: 40px 100px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

  .error {
    color: #f00;
  }

  &.contact {
    #choose-help-type {
      display: none;
    }

    #support-message {
      display: block;
    }
  }

  &.contact-sent {
    #support-message {
      display: none;
    }

    #choose-help-type {
      display: none;
    }

    #contact-sent {
      display: block;
    }
  }

  &.contact-error {
    #support-message {
      display: none;
    }

    #choose-help-type {
      display: none;
    }

    #contact-error {
      display: block;
    }
  }

  .user-message {
    margin: 20px 0;
    background: #fafafa;
    text-align: left;
    padding: 20px;
    white-space: pre-wrap;
  }
}

#choose-help-type {
  max-width: 800px;
  margin: 60px auto;
  .clearfix;

  img {
    margin-bottom: 10px;
    display: none;
  }

  h5 {
    color: #292c35;
    font-family: aktiv-grotesk-std, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 30px;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
  }
  > div {
    width: 47.5%;
    float: left;
    position: relative;
    text-align: center;
    //background:#fcfcff;

    padding: 80px 40px 40px 40px;
    background: #f7fbff;
    box-shadow: 0 0 20px rgba(102, 103, 128, 0.07);
    border: 1px solid #ebeef8;
    &:first-child {
      margin-right: 5%;
    }
  }

  .button {
    background: #86DB6F;
    //background:#45A1ED;
    border: none;
    color: #fff;
    display: block;
    margin: 0 auto;
    text-align: Center;
    font-size: 18px;
  }

  h5.title {
    padding-left: 80px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    padding: 10px 20px 10px 20px;
    color: #fff;
    background: #45A1ED;
    z-index: 2;
    margin: 0;
  }
}

#finish-setup {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 60px 60px 80px;
  background: #f7fbff;
  box-shadow: 0 0 20px rgba(102, 103, 128, 0.07);
  margin-top: 20px;
  border: 1px solid #ebeef8;
  position: relative;

  h4.title {
    padding-left: 80px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    padding: 20px 20px 20px 40px;
    color: #fff;
    background: #45A1ED;
    z-index: 2;
    margin: 0;
  }
  ul {

    h4 {
      margin-top: 0;
      margin-bottom: 20px;
      color: #505863;
    }

    li {
      position: relative;
      margin-bottom: 60px;
    }

    span {
      height: 30px;
      width: 30px;
      line-height: 30px;
      color: #fff;
      background: #86DB6F;
      display: inline-block;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      left: -40px;
      top: -5px;
    }

    p {
      color: #747a8c;
      display: none;
    }

    .more-info {
      display: none;

      &.showing {
        display: block;
      }
    }
  }

  .button {
    background: #86DB6F;
    //background:#45A1ED;
    border: none;
    color: #fff;
    display: block;
    margin: 0 auto;
    text-align: Center;
    font-size: 18px;
  }
}

#sidebar-menu-items {
  > li {

    line-height: 35px;
    color: #383F45;
    list-style: none;

    span, a {
      position: relative;
    }

    a {
      color: #383F45;
      text-decoration: none;
    }
  }

  li a, .section-name {
    padding: 0 20px 0 35px;
    display: block;
  }

  .divider {
    line-height: 1;
    margin: 8px 35px;

    hr {
      border-color: rgba(0, 0, 0, .07);
      float: none;
    }
  }

  .sub-menu {
    li {
      list-style: none;
      position: relative;

      a {
        color: #5b686e;
      }

      > a:before {
        background: #000;
        content: ' ';
        position: absolute;
        height: 1px;
        width: 6px;
        top: 50%;
        left: 18px;
        opacity: .2;
        margin-top: -1px;
      }

      &.active &:before {
        background: rgba(40, 154, 246, 1);
      }
    }
  }

  li:not(.section):hover, .section-name:hover, li:not(.section).active, li.section.active .section-name {
    background-color: rgba(255, 255, 255, .8);
  }

  li:not(.section).active, li.section.active, li.section.child-active {
    .section-name:before, > a:before {
      background-color: rgba(40, 154, 246, 1);
      opacity: 1;
    }
  }

  .bubble {
    height: 20px;
    width: 22px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    background: rgba(95, 215, 66, .6);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    margin-left: 8px;

    &.empty {
      display: none;
    }
  }
}

.sidebar-icon {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px;
  width: 24px;
  display: none;
  margin: 0;
  font-size: 17px;
  color: @sidebarTextColor;
  top: 1px;
  margin-right: 10px;
  //opacity: .3;

}

#current-user {
  width: 100%;
  //background: rgba(0, 0, 0, .01);
  padding: 10px 0;

  position: relative;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  margin-bottom: 10px;

  a {
    color: @sidebarTextColor;;
  }

  .user-image-wrapper {
    height: 60px;
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
    margin-right: 10px;
  }

  .user-image {
    display: inline-block;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;

    img {
      vertical-align: top;
      width: 100%;

    }
  }

  .user-meta {
    width: @sidebarWidth;

    text-align: center;
    margin-top: 7px;

    > div {
      display: inline-block;
      line-height: 1.3;
      font-size: 14px;
      .ellipsis;
    }
  }

  .user-name {
    color: @sidebarTextColor;

  }

  .user-role {
    color: #959ca0;
  }

  &:hover #logout {
    display: block;
  }
}

#app-wrapper.white {
  #sidebar {

    background: #fff;

    li:first-child .sidebar-icon {
      color: #cb6817;
    }

    li:nth-child(2) .sidebar-icon {
      color: #00a8ff;
    }

    li:nth-child(3) .sidebar-icon {
      color: #b6c1c6;
    }

    li:nth-child(4) .sidebar-icon {
      color: #ab6fef;
    }

    li:nth-child(5) .sidebar-icon {
      color: #f07c00;
    }

    li:nth-child(6) .sidebar-icon {
      color: #00a8ff;
    }

    li:nth-child(7) .sidebar-icon {
      color: #b6c1c6;
    }

    li:nth-child(8) .sidebar-icon {
      color: #4cc159;
    }

    li:nth-child(9) .sidebar-icon {
      color: #00a8ff;
    }

    li a {
      color: #818181;
    }

    li:hover a {
      color: #202020;
    }

    #current-user {
      background: #fff;
    }
  }

  .entity-list {
    border-left: 1px solid @border-color;
  }
}

#app-wrapper.grey {

  #sidebar {
    background: #2a2d33;

    #global-search {
      background: rgba(0, 0, 0, .15);
      color: #aaa;
      position: relative;

    }

    #current-user {
      background: #464b57;
      border-bottom: none;

      .user-name {
        color: #ddd;
      }

      .user-role {
        color: #ccc;
      }
    }

    #footer-space {
      border-top-color: transparent;
    }
  }

  #sidebar-menu-items li {
    margin: 0;
    padding: 0 7%;
    width: 100%;
    border-radius: 0;

    .sidebar-icon {
      color: #63666e;
    }

    a {
      color: #aeaeb0;
      padding-left: 40px;
    }

    &:hover, &.active {
      background-color: #656c7e;

      .sidebar-icon {
        color: #fff;
      }

      a {
        color: #fff;
      }
    }
  }
}

#app-wrapper[class^=refresh] {

}

#app-wrapper[class^=blur] {
  #sidebar {
    background: #2a2d33 url(../images/blur/3.jpg);

    #global-search {
      background: rgba(0, 0, 0, .15);
      color: #aaa;
      position: relative;

      &::-webkit-input-placeholder {
        /* WebKit browsers */
        color: rgba(255, 255, 255, .2);
      }
      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: rgba(255, 255, 255, .2);
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: rgba(255, 255, 255, .2);
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: rgba(255, 255, 255, .2);
      }

    }

    #current-user {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, .07);

      .user-name {
        color: #ddd;
      }

      .user-role {
        color: #ccc;
      }
    }

    #footer-space {
      border-top-color: transparent;
    }
  }

  #sidebar-menu-items li {
    margin: 0;
    padding: 0 7%;
    width: 100%;
    border-radius: 0;

    .sidebar-icon {
      color: #fff;
    }

    a {
      color: #fff;
      padding-left: 40px;
      text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    }

    &:hover, &.active {
      background-color: rgba(255, 255, 255, .1);

      .sidebar-icon {
        color: #fff;
      }

      a {
        color: #fff;
      }
    }
  }

}

#app-wrapper.blur2 {
  #sidebar {
    background: #2a2d33 url(../images/blur/1.jpg)
  }

  #sidebar-wrapper {
    background: rgba(0, 0, 0, .3);
  }

  #global-search {
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0.12);

  }

  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: rgba(255, 255, 255, .6);
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, .7);
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, .7);
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: rgba(255, 255, 255, .7);
  }
}

#app-wrapper.blur3 {
  #sidebar {
    background: #2a2d33 url(../images/blur/12.jpg)
  }
}

#app-wrapper.dark-blue {
  #sidebar {
    background: #1E2229;

    #global-search {
      background: rgba(0, 0, 0, .1);
    }

    #footer-space {
      border-top-color: rgba(255, 255, 255, .1);
    }

    #current-user {
      background: rgba(255, 255, 255, .05);
      border-bottom: 1px solid transparent;

      .user-name {
        color: #eee;
      }
    }

    li {
      color: #7C838D;

      a {
        color: #7C838D;
      }

      .sidebar-icon {
        color: #7C838D;
      }

      &:hover {
        background: transparent;

        a {
          color: #fff;
        }

        .sidebar-icon {
          color: #fff;
        }
      }

      &.active {
        a {
          color: #84D1FF;
        }

        .sidebar-icon {
          color: #84D1FF;
        }
      }
    }

  }
}


#logo-space {
  height: 0px;
  background: #2381E9;
}

#running-timer-space {
  float: left;
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
}

#notification-space {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;

  .notification {
    min-height: 50px;
    padding: 15px 0;
    opacity: 0;

  }

  .notification-inner {
    padding: 0 60px;
    text-align: center;
  }

  .close {
    float: right;
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
    color: #000000;
    opacity: 1;
    right: 20px;
    top: 8px;
  }
}

#logout {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: none;
  transition: all linear .2s;
  opacity: .3;

  &:hover {
    opacity: .5;
  }
  .icon {
    background-position: -384px 0;
    margin: 12px 4px 0 0;
  }
}

#global-search-space {
  position: relative;
  height: 40px;
  width: 90%;
  margin: 0 auto;

  &:after {
    font-family: 'themify';
    height: 20px;
    width: 20px;
    position: absolute;
    top: 11px;
    left: 8px;
    content: "\e610";
    color: rgba(0, 0, 0, .4);
  }
}

#global-search-wrapper {
  height: 100%;
}

#global-search {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  height: 100%;
  margin: 0;
  width: 100%;
  padding: 0 10px 0 27px;
  color: #333;

  &:focus {
    outline: none;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, .2);

    &:after {
      color: rgba(0, 0, 0, .6);
    }

  }

  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #969fa6;
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #969fa6;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #969fa6;
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #969fa6;
  }

}

#footer-space {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 92%;
  margin: 0 4%;
  height: 0px;

  a {
    color: #c0c0c0;
    width: 50%;
    display: block;
    float: left;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;

    &:hover {
      color: #333;
      background: rgba(255, 255, 255, .7);
    }
  }
}

.window-outer {
  width: 100%;

  position: absolute;
  right: 0;
  top: 0;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f6f9+0,f4f6f9+1,e8eef7+100 */

  background: #F1F5F9;
}

.mini-header .window-outer {
  top: 0;
}

.window {
  height: 100%;
  width: 100%;
  position: relative;
  margin: 20px 20px 20px 0;
  overflow: hidden;
  float: right;
  z-index: 0;
  .modal-window-base;

  opacity: 0;

  &.one-panel {
    .panel {
      display: none;
    }

    .secondary {
      display: block;
      width: 100%;
      border-left: none;
    }
  }
}

.full .window {
  margin: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  .border-radius(0);
}

.window-menu {
  height: 20px;
  background: #fafafa;
  box-shadow: inset 0 -1px 0 0px rgba(255, 255, 255, 1);
  .box-shadow-2(0 1px 2px rgba(0, 0, 0, 0.04));
  margin-bottom: 10px;
  border-bottom: 1px solid #D9D9D9;
  padding: 10px 24px;

  h3 {
    line-height: 20px;
    color: #666;
  }
}

.viewport-shadow {
  content: ' ';
  width: 100%;
  height: 5px;
  display: block;
  -webkit-mask-box-image: -webkit-linear-gradient(left, transparent 0%, rgba(0, 0, 0, .8) 50%, transparent 100%);
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), transparent);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1), transparent);
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .1), transparent);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, .1), transparent);
  background-image: linear-gradient(top, rgba(0, 0, 0, .1), transparent);
  z-index: 999999;
  position: absolute;
  top: 0;
  left: 0;
}

.viewport-no-shadow {
  background-image: none;
}

.panel {
  height: 100%;
  position: relative;
  float: left;
  width: 20%;

  .hidden {
    display: none;
  }
}

.panel.secondary {
  width: 100%;

  .inner-content >
  div:first-child {
    .clearfix;
    margin: 0 auto 20px auto;
    max-width: 80%;
    position: relative;

  }

  &.full-width {
    width: 100%;
    border-left: none;
  }

  .nano:after {
    .viewport-shadow;
  }

  .nano.top:after {
    .viewport-no-shadow;
  }

  .nano .content {
    outline: none !important;
  }


  @media(max-width:1024px){
    .nano .content{
      padding-bottom:80px;
    }
  }
}

.slide-out-panel-open {
  .panel.secondary {
    border-left: 1px solid @panel-separator-color;
  }
}

.panel-overlay {
  display: none;
}

//todo:is this used?
.panel.bordered {
  box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.2);
}

.panel.top-info {
  padding-top: @panel-info-height + 1;
}

//todo:is this used?
.panel.half {
  width: 50%;
  float: left;
}

//todo:is this used?
.half:last-child {
  box-shadow: -4px 0 6px rgba(0, 0, 0, .07), inset 1px 0 0 0 rgba(0, 0, 0, .2);
}

.disable-interaction-overlay {
  display: none;
  opacity: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  transition: opacity linear 2s;
  background: rgba(255, 255, 255, .9);

  &.showing {
    display: block;
    opacity: 1;;
  }
}

.panel-info {
  height: 80px;

  width: 100%;
  position: relative;
  top: 0;
  right: 0;
  box-shadow: 4px 0 4px rgba(0, 0, 0, 0.22);
  background: #fff;
  z-index: 1;

  .panel-info-middle {
    width: 20%;
    float: left;

  }

  .panel-info-left {
    width: 40%;
    float: left;
    padding-left: 10%;
  }

  .panel-info-left-inner{
    padding-left:10px;
    display:inline-block;
    vertical-align: top;
  }

  .panel-info-right {
    width: 40%;
    float: left;
    padding-right: 10%;
  }

  .panel-title {
    color: @dark-blue;
    font-weight: 300;
    text-align: center;
    margin: 0;
    line-height: 80px;
    .ellipsis;
  }
  .filter {
    float: right;
  }

  .panel-actions-wrapper {
    display: inline-block;
    float: right;
    position: relative;
    top: 25px;
    margin: 0;

    .panel-actions {
      display: inline-block;

      > div {
        margin-right: 10px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .panel-title-widget {
    display: inline-block;
    padding-left: 10px;
    vertical-align: top;
  }

  .board-buttons {
    position: relative;
    top: 25px;

    a {
      display: inline-block;
      height: 30px;
      width: 30px;
      margin-right: 10px;
      //background-color:#A0B0C6;
      border-radius: 4px;

      background-image: url(../images/info-buttons/list.svg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 15px;

    }

    a.board-tasks {
      //background-color:#47BCFD;
    }

    a.board-notes {
      background-image: url(../images/info-buttons/pencil.svg);
      //background-color:#2CDDB7;
    }

    a.board-files {
      background-image: url(../images/info-buttons/file.svg);
      background-size: 15px;
      // background-color:#FF5477;
    }

    a.board-home {
      background-image: url(../images/info-buttons/home.svg);

    }
  }

  #discuss-button-wrapper {
    display: inline-block;
    vertical-align: top;
    border-left: 1px solid #f5f5f5;
    margin-left: 10px;
    padding-left: 10px;
  }

  .button {

    color: @bluish-grey;
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent !important;
    &:hover {
      box-shadow: none;
    }
  }

  .filter-button span, .dropdown-button .button:before {
    display: none;
  }

  .dropdown-button .main-button {
    padding-left: 10px;
  }

  .new-entity, .button.main-action {
    background: #4ea0e2;
    color: #fff;

    .icon {
      color: #fff;
    }

    &.green {
      background: @green-button-color;
    }

    &:hover {
      background: #4a94d2;
      color: #fff;

      .icon {
        color: #fff !important;
      }
    }

  }

  .new-entity, .button {
    border-radius: 4px;
  }

  &.timer-started {
    height: 120px;
    position: relative;
  }

  @media (max-width:1024px){
    .panel-title{
      line-height:48px;
    }

    .panel-info-left{
      padding-left:4%;
    }

    .panel-info-right{
      padding-right:4%;
    }

    .panel-actions-wrapper{
      top:8px;
    }
  }
}

.entity-actions {
  .button {
    background: #f5f5f5;
    border-radius: 4px;
    line-height: 30px;
    height: 30px;
    padding: 0 20px;
    border: none;
    color: #3d3c40;
  }
}

@inner-padding-right: 40px;
@inner-padding-left: 40px;

.panel > .inner {
  list-style: none;
  margin: 0 auto 30px auto;


  //padding: 10px 20px 0 40px;

  overflow: hidden;
  position: relative;

}

.panel-info-hidden {
  .panel-info {
    display: none;
  }

  &.panel > .inner {
    margin-top: 0;
  }
}

.secondary .filter {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 200px;
}

.inner-content-wrapper {
  position: relative;
  z-index: 0;
}

//targets the actual view being loaded
.inner-content.content > div {
  padding-right: @inner-padding-right;
  padding-left: @inner-padding-left;
}

.inner-menu {
  margin: 10px 0 20px 0;
  position: relative;
  padding-right: @inner-padding-right;
  padding-left: @inner-padding-left;
  z-index: 1;
  .clearfix;

  .right-menu, .left-menu {
    margin: 0;
    //height: @button-set-height;
    width: 45%;
  }

  .right-menu {
    float: right;
  }

  .left-menu {
    float: left;
    margin-right: 10%;
  }
}

#discuss-project-button {
  height: 36px;
  width: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: #f5f5f5;
  color: #9c9c9c;
  cursor: pointer;

  position: relative;

  .icon {
    color: #9c9c9c;
  }

  &:hover {
    background: #4ea0e2;
    .icon {
      color: #fff;
    }

  }

}

.inner-left {
  display: block;
  margin-right: 0px;
  position: relative;
  left: 1px;

  .new-entity {
    float: right;
  }
}

.inner-right {
  display: none;
  width: 300px;
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  margin-left: 20px;
}

.info-showing {

  #info-panel {
    display: block;
    margin-right: 0;
  }

  #info-panel-overlay {
    visibility: visible;
    opacity: 1;
  }
}

#info-panel-overlay {
  background: linear-gradient(to left, rgba(188, 198, 206, 0.17) 50%, rgba(98, 112, 120, 0.1));
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease;
}

#info-panel {
  width: 500px;
  z-index: 2;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  height: 100%;
  margin-right: -500px;
  box-shadow: 3px 0 20px rgba(0, 0, 0, .2);

  overflow: auto;
  border-left: 1px solid #ccc;
  transition: margin-right .2s ease;
  .title {
    border-bottom: 1px solid #e8e9ea;
    margin: 0 20px;
    .clearfix;

    > * {
      display: block;
      float: left;
    }
    .close {
      height: 58px;
      line-height: 58px;

      padding-right: 20px;
      text-align: center;
      font-size: 19px;
      cursor: pointer;

      &:hover {
        color: @active-blue;
      }
    }

    .button-space {
      display: block;
      float: right;

      padding-right: 10px;
      height: 58px;
    }

    h3 {
      display: inline-block;
      max-width: 100px;
      line-height: 58px;
      height: 58px;
      margin: 0;
      font-size: 18px;
      .ellipsis;

    }
  }

  .title {
    .new-entity, .button {
      position: relative;
      top: 11px;

    }

    .button.main-action {
      .clear-button;
    }

    .button {
      background: none;
      border: none;
    }

    .new-entity, .button.main-action {

      color: #2381e9;

      .icon {
        color: #2381e9;
      }
    }
  }

  .form {
    padding: 20px;
  }

  .form input[type=text], .form input[type=number], .form input[type=password], .form textarea {
    border-top-color: #D9D9D9;
  }

}

#info-panel {
  .item-details-inner {
    margin: 0;
  }

}

#discussion-panel {

  height: 100%;
  position: relative;
  margin: 0 auto;

  .nano:after {
    .viewport-shadow;
  }

  .nano.top:after {
    .viewport-no-shadow;
  }

  #top-details {

    margin-right: 20px;
    overflow: hidden;

    padding: 0 30px;
    text-align: center;

    > div {
      display: inline-block;
      padding: 0px 30px 0px 0;

      &:last-child {
        padding-right: 0;
      }

    }

    h3 {
      font-size: 16px;
      color: #444;
      margin: 0;
    }

    h5 {
      text-transform: uppercase;
      color: #888;
      font-size: 10px;
      margin-top: 1px;
      margin-bottom: 0; //            letter-spacing: -1px;
    }
  }

  #attach-files {

    font-size: 12px;
    top: 1px;
    left: 21px;
    position: absolute;
    padding: 2px 8px;
    height: 48px;
    line-height: 42px;
    cursor: pointer;
    border-right: 1px solid #ccc;

    span {
      font-size: 20px;
    }

    &:hover {
      background: #fafafa;
    }

  }

  .message-files {
    font-size: 15px;
    .icon {
      color: @activeTextColor1 !important;
      font-size: 12px !important;
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
  }

}

#discussion-header-wrapper {
  height: 30px;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  text-align: center;

  h4 {
    margin: 0;
    .ellipsis;
    color: #999;
    display: inline-block;
    font-size: 15px;

  }
  #discussion-enity-title {
    color: #888;
    padding-right: 5px;
  }

  > div {
    display: inline-block;
    width: 100%;
    line-height: 22px;
    color: #aaa;
    .ellipsis;
  }

  .icon {
    cursor: pointer;
    margin-right: 10px;
    float: right;
  }

  #refresh-messages {
    float: right;
    background-position: -240px -24px;
  }

}

#discussion-panel.minimal {
  margin: 0 20px;
  #discussion-header-wrapper {
    //display:none;
    position: relative;
    border-bottom: none;
    margin-bottom: 20px;
    text-align: left;

    h4 {
      line-height: 30px;
    }

    .button {
      display: none;
    }
  }

}

#messages-list-wrapper {

  z-index: 0;
  margin: 0;
  margin: 30px 20px 0 0;
  list-style: none;

  ul {
    margin-bottom: 20px;
  }
}

#messages-list {
  padding-top: 20px;

}

#new-message {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  padding: 0 20px;
  background: #fff;
  z-index: 999999;

  height: 60px;

  #send-message, #sending-message {
    height: 50px;
    position: absolute;
    right: 20px;
    top: 0px;

    line-height: 48px;
    font-size: 14px;
    background: #4ea0e2;
    color: #fff;
    padding: 2px 10px;
    border-radius: 0 3px 3px 0;
  }

  #sending-message {
    display: none;
  }

  &.sending-message {
    #send-message {
      display: none;
    }

    #sending-message {
      display: block;
    }
  }

  #message-area-wrapper {
    position: relative;

  }

  textarea, #message-area-wrapper, #sending-message-overlay {
    height: 50px;
    border-radius: 3px;
    border-color: #ccc;

  }

  textarea {
    width: 100%;
    box-shadow: none;
    padding-left: 47px;
    padding-right: 130px;
  }

  #message-file-name-space {
    height: 30px;

    border-top: none;
    display: none; //    border-width:0 1px 1px 1px;
    position: relative;

    .remove-files {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      color: @activeTextColor1;
      font-size: 12px;
      width: 76px;
    }

  }

  #file-names {
    position: relative;
    padding-right: 81px;

    span {
      display: inline-block;
      padding: 0 10px;
      line-height: 22px;
      height: 22px;

      margin: 4px 5px;
      background: #DFEDFF;
      border-radius: 3px;

    }
  }

  &.has-files {
    height: 80px;

    #message-file-name-space {
      display: block;
    }
  }
}

/** Comments **/
.user-messages-section {
  .user-info {
    > a {
      display: inline-block;
      vertical-align: top;
    }

    .user-link {
      line-height: 32px;
      margin-left: 20px;
      font-weight: bold;
      color: #3d3c40;

    }
  }
}

.message {

  position: relative;
  padding: 10px;

  &:hover {
    background: rgba(248, 250, 250, .8);
  }

  .posted-on {
    font-size: 12px;
    max-width: 80%;
    display: block;
    float: right;

    position: relative;

    color: #555;

    .ellipsis;

    a {
      color: #6f8ca3;
    }

    span {
      //            padding: 4px 20px;
      //            background: #fff;
      position: relative;
      z-index: 1;
    }

    hr {
      position: absolute;
      top: 10px;
      left: 0;
      z-index: 0;
      margin: 0;
      display: none;
    }

    a {
      .ellipsis;
    }
  }
  .message-contents {
    position: relative;
  }

  .user-image {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    width: 50px;
    height: 50px;
  }
  .message-main {
    width: 75%;
    display: inline-block;
    padding-left: 57px;
    vertical-align: top;
  }

  .message-text-inner {
    padding-top: 3px;
    color: #000;

    pre {
      font-family: @font-family;
      color: #3d3c40;
      line-height: 1.3;
      margin: 0;
      white-space: pre-wrap;
    }
  }

  .message-meta {
    width: 24%;
    display: inline-block;
    text-align: right;
  }

  .user-image {
    display: inline-block;
  }

  &:first-child {
    margin-top: 0;
  }

  .message-date {
    color: #fff;
    display: block;
    margin-top: 2px;
    font-size: 12px;
  }

  &:hover .message-date {
    color: #333;
  }

  .user-link {

    font-weight: bold;
    color: #2988cc;
    font-size: 14px;
  }
}

#slide-out-panel-wrapper {
  float: left;
  position: relative;
  width: 0;
  overflow: visible;
  height: 100%;
}

.slide-out-panel {
  height: 100%;
  width: 600px;
  border-left: 1px solid @border-color; //    border-right:1px solid rgba(0,0,0,.2);

  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -600px;

  z-index: 1;

  > div {
    float: right;

  }

}

.entity-list {
  height: 100%;
  width: 400px;
  position: relative;
}

.entity-list-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 51px;
  width: 100%;
  padding: 11px 15px;
  z-index: 2;
  border-bottom: 1px solid @border-color;

  > .entity-list-title, > div {
    display: inline-block;
  }

  .entity-actions {
    float: right;
  }
}

.entity-list-title {
  margin: 0;
  line-height: 28px;
}

.entity-list-button {
  .basic-button;
}

.entity-list-content {
  padding-top: 50px;
  height: 100%;
}

.item-details {
  height: 100%;
  width: 100%;

  .item-details-main {
    padding-bottom: 20px;
    margin-bottom: 20px;
    .clearfix();
  }

  .item-details-inner {
    margin: 0 20px;
  }

  .item-notes {
    margin-top: 20px;
    float: left;

    p {
      margin-top: 10px;
    }
  }
}

.item-details-list {
  list-style: none;
  margin: 10px 0 40px 0;

  &:last-child {
    margin-bottom: 0;
  }

  li {
    clear: both;
    line-height: 14px;
    margin-bottom: 10px;
    .clearfix();
  }

  .email-details .icon {
    background-position: -72px 0;
  }

  .address-details {
    .icon {
      background-position: 0 -24px;
      vertical-align: top;
    }

    .address {
      display: inline-block;
      line-height: 18px;
    }
  }

  .phone-details .icon {
    background-position: -72px -144px;
  }

  .website-details .icon {
    background-position: -336px -144px;
  }
}

.task-details {
  .item-details-inner {
    position: relative;
  }

  .task-main {
    .clearfix;
    width: 900px;
    margin: 0 auto;
    position: relative;
  }

  .task-status-indicators;

  .task-content-section {
    padding: 20px 0;
    width: 650px;
    float: left;
    border: 1px solid #cfcfcf;
    //.box-shadow-2(0 1px 3px rgba(0, 0, 0, 0.1), 0 0 10px 4px rgba(0, 0, 0, 0.03));

  }

  .task-content {
    position: relative;
    padding: 0 20px 20px 50px;
  }

  .task-details-meta {
    padding: 20px;
    width: 250px;
    float: left;

    color: #888;

    span {
      display: block;
      float: left;
      font-weight: bold;
      margin-right: 10px;
      width: 95px;
    }

    > div {
      .clearfix();
      margin-bottom: 10px;

    }
  }
  .is-task-completed {
    left: 20px !important;
    top: 4px;
  }

  .task-text {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 150%;
  }

  &.complete {
    .is-task-completed {
      .completed-task-checkbox;
    }

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

    #task-edit {
      display: none;
    }
  }

  .task-description {
    color: #888;
    margin-bottom: 20px;
  }

  .task-actions {
    display: block !important;
    top: 0 !important;
    width: auto !important;
    position: relative !important;
    float: right;

    .button {
      float: right;
      margin-right: 10px;
    }
  }

  .task-weight-value {
    .value {
      float: left;
      margin-right: 10px;
    }
  }

  #change-task-weight {
    background-position: 0 -72px;
    height: 14px;
    width: 14px;
    cursor: pointer;
    transition: all .2s linear;
    opacity: 0;
  }

  .button {
    display: inline-block;
    cursor: pointer;
    opacity: .95;
    transition: all .2s linear;

    &:hover {
      opacity: 1;
    }
  }

  .task-files {
    padding: 20px 20px 0 20px;

    ol {
      list-style: none;
      padding: 0;
    }

    li {
      line-height: 30px;
      padding-left: 30px;
      background: transparent url(../images/activity/file.png) no-repeat 10px center;
      .ellipsis;
    }
  }

  h6 {
    font-weight: bold;
    color: #000;
    font-size: 17px;
    padding: 10px 20px;
    cursor: pointer;

    &:hover {
      color: @active-blue;
    }
  }

}

.task-details-alternate {
  padding: 20px;

  .item-details-inner {
    position: relative;
  }

  [class^=icons8] {
    font-size: 20px;
    margin-right: 10px;
    color: @bright-blue;
  }

  .task-status-indicators;

  #task-time-entries-wrapper {
    display: none;
  }

  &.has-time-entries {
    #task-time-entries-wrapper {
      display: block;
    }
  }

  .task-content {
    position: relative;
    padding: 0 0 0 30px;
    color: #000;
  }

  .user-image {
    display: none;
  }

  .task-description {
    padding-left: 30px;
  }
  .task-details-meta {

    margin-top: 40px;
    margin-bottom: 30px;
    padding-left: 30px;
    font-size: 12px;
    span.meta-tag {
      display: inline-block;
      color: #999;

      text-transform: uppercase;
      width: 100px;
      margin-right: 5px;

    }

    > div {
      display: block;
      margin-right: 10px;
      margin-bottom: 5px;
    }

    [class^="ti-"] {
      color: #bbb;
      margin-right: 5px;
      font-size: 17px;
    }
  }

  .is-task-completed {
    left: 0px !important;
    top: 4px;
  }

  .task-text {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 150%;
  }

  &.complete {
    .is-task-completed {
      .completed-task-checkbox;
    }

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

    #task-edit {
      display: none;
    }
  }

  .task-description {
    color: #888;
    margin-bottom: 20px;
  }

  .task-actions {
    display: block !important;
    top: 0 !important;
    width: auto !important;
    position: relative !important;
    float: right;

    .button {
      float: right;
      margin-right: 10px;
    }
  }

  .task-weight-value {
    .value {
      float: left;
      margin-right: 10px;
    }
  }

  #change-task-weight {
    background-position: 0 -72px;
    height: 14px;
    width: 14px;
    cursor: pointer;
    transition: all .2s linear;
    opacity: 0;
  }

  .button {
    display: inline-block;
    cursor: pointer;
    opacity: .95;
    transition: all .2s linear;
    margin-left: 0 !important;

    &:hover {
      opacity: 1;
    }
  }

  .task-files {

    margin-top: 20px;
    margin-bottom: 20px;

    ol {
      list-style: none;
      padding: 0;
    }

    a {
      color: #777;
    }

    li {
      line-height: 30px;
      padding-left: 30px;
      .ellipsis;
    }
  }

  .task-weight-value {
    display: inline-block;
  }

  h5 {
    margin-left: 30px;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
    display: inline-block;
  }
  h6 {
    color: #000;
    margin-bottom: 15px;
    font-size: 17px;
    padding: 10px 0 10px 30px;

    cursor: pointer;
    span {
      float: right;
      display: inline-block;
      position: relative;
      display: none;

    }

    .closed {
      display: inline-block;
    }

    &.showing {
      span {
        display: inline-block;
      }
      span.closed {
        display: none;
      }

      + div {
        margin-bottom: 40px;
      }
    }

    &:hover {
      color: @active-blue;
    }
  }

  #timer {
    background: transparent;
    border: none;
    padding: 0 0 0 30px;
    width: 100%;
  }

  #enter-time {
    font-size: 12px;
    margin-top: 8px;
    cursor: pointer;
    color: #777;

    &:hover {
      color: #000;
    }
  }

  @media(max-width:1024px){
    .solo-panel;
    margin:0 auto;
  }
}

#timer {
  background: #FBFBFD;
  border-top: 1px solid #E6E6EB;
  border-bottom: 1px solid #E6E6EB;
  padding: 10px 20px;
  .clearfix;

}

.timer-buttons {
  float: left;
}

#elapsed-time {
  float: right;
  font-size: 24px;
  line-height: 30px;
  font-weight: bold;
  color: #888;
  display: none;
}

#inactive-timer {
  float: right;
  font-weight: normal;
  font-style: italic;
  font-size: 14px;
  color: #888;
  line-height: 30px;
}

#stop-timer {
  display: none;
}

//#enter-time {
//  margin:5px 0 0 0;
//  color:#333;
//  font-size:12px;
//  text-align:center;
//  cursor:pointer;
//
//  &:hover{
//    text-decoration:underline;
//  }
//}

#task-attachments-tab {
  .add-file-button {
    position: absolute;
    right: 10px;
  }

  .attachments-list {
    float: left;
    clear: both;
  }
}

#task-time-entries {
  margin-left:40px;

  .header {
    font-weight: bold;
    border-bottom: 1px solid #eee;
    color: #555;
    display: none;
    &:hover {
      background: #fff;
    }
  }

  .time-entry-details {
    margin-right: 21px;


    > div {
      float: left;
      width: 50%;
      padding: 0 10px;

      &:first-child {
      }
    }
  }

  .time-entry-delete {

    position: absolute;
    right: 5px;
    top: 0;
    margin-top: 6px;
    display: none;
  }

  li {
    list-style: none;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    position: relative;
    margin-left: -10px;

    &:hover {
      background-color: #fafafa;

      .time-entry-delete {
        display: block;
      }
    }

    &.new {
      background-color: #feffeb;
    }
  }

}

.client-task-list .list {
  li {
    padding: 0 0 0 10px;
  }

  li.list-header {
    padding: 0;
  }

  .is-task-completed {
    left: 0 !important;
  }

  .task-details {
    padding-left: 30px;
    padding-right: 280px;
  }

  .is-task-completed {
    display: none;
  }
}

.clients-complete-tasks .mine .is-task-completed {
  display: block;
}

.client-task-details {
  .task-contents {
    padding-left: 0;
  }
}

#time-entry-form {
  .fields {
    width: 206px;
    margin: 0 auto;
  }

  .field {
    width: 60px;
    margin-right: 10px;
    float: left;

    &:last-child {
      margin-right: 0;
    }
  }
}

#task-weight-form {
  width: 378px;

  p {
    margin-bottom: 30px;
  }
}


.user-details {
  width: 440px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, .05);
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 20px !important;

  .role {

  }

  .icon {
    margin-right: 10px;
  }

  .user-image {
    width: 100%;
    height: 300px;
    background: #fff;
    border-radius: 3px;

  }

  .user-image-inner {
    height: 300px;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 12;
    background: #fff url(../images/unknown-user-big.jpg) center center no-repeat;

    img {
      width: 100%;
    }
  }

  .user-contact-info {
    float: left;
    width: 400px;
    padding-right: 120px;
    position: relative;
  }

  .user-actions, .admin-user-actions {

    display: inline-block;
    position: absolute;
    top: 25px;
    right: 0;
  }

  div.section {
    float: left;
    clear: both;
  }
}

/** Lists **/
.list {
  margin: 0;
  .disable-selection;

  ul {
    margin: 0;
  }

  li {
    padding: 0px 20px 0 20px;
    margin-bottom: 1px;
    list-style: none;
    cursor: pointer;
    position: relative;

    &:first-child {
      border-top: none;
    }
  }

  .list-main-header {
    padding: 0px 20px 0 20px;
    background: #f7f7f7;
    font-weight: bold;
    color: #666;
    width: 100%;
  }
}

.detailed-list.fancy li.selected, .detailed-list.fancy li.selected:hover {
  color: #fff;
  text-shadow: -1px 0px rgba(31, 109, 182, 1);
  border-top: 1px solid #1F6DB6;
  border-bottom: 1px solid #1F6DB6;
  background: #5AAAF5;
  background: -moz-linear-gradient(top, #5AAAF5 0%, #328BDE 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5AAAF5), color-stop(100%, #328BDE));
  background: -webkit-linear-gradient(top, #5AAAF5 0%, #328BDE 100%);
  background: -o-linear-gradient(top, #5AAAF5 0%, #328BDE 100%);
  background: -ms-linear-gradient(top, #5AAAF5 0%, #328BDE 100%);
  background: linear-gradient(top, #5AAAF5 0%, #328BDE 100%);
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aaaf5', endColorstr='#328bde',GradientType=0 );*/
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .2), 0 1px 0 rgba(178, 178, 178, .6);
  border: 1px solid #1F6DB6;
  height: 60px;

  &:first-child {
    border-top: none;
  }
}

.detailed-list li.selected, .detailed-list li.selected:hover {
  color: #333;
  background: #f2f8fd;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .2);
  border-top: 1px solid #e6f0f9;
  border-bottom: 1px solid #e6f0f9;
  height: 60px;

  &:first-child {
    border-top: none;
  }
}

.detailed-list li.selected + li {
  border-top-color: #fff;
}

.details-list li.selected:first-child {
  border-top-color: #fff;
}

.detailed-list.no-status {
  .status {
    background-color: #e0e0e0;
  }
}

.list.condensed li, .list-main-header {
  height: 50px;
  line-height: 50px;

  > div {
    float: left;
    padding: 0 5px;
    height: 50px;
  }
}

.list.condensed li:hover, .list.condensed li.selected, .list.condensed li.pseudo-hover {
  background-color: #fafafa;
}

.list.condensed li.selected {
  background-color: #F2F8FD;
  border-top-color: #D0E9F7;
}

//TODO: Can I get rid of the non-detailed list? Combine the two?
//TODO: Get rid of full? What is it's purpose
/** Detailed List **/
.detailed-list li {
  height: 60px;
  padding: 10px 20px;
  overflow: hidden;
}

.detailed-list .top-details {
  font-weight: bold;
  margin-bottom: 10px;
  .clearfix();
  .ellipsis;
  /*font-size:20px;*/
}

.detailed-list .bottom-details {
  height: 10px;
  line-height: 10px;
  color: #aaa;
  text-transform: uppercase;
  font-size: 10px;
  .ellipsis;
}

.fancy li.selected .bottom-details {
  color: #eee;
}

li.selected .bottom-details {
  color: #333;
}

.detailed-list .left {
  width: 60%;
  margin-right: 10%;
}

.detailed-list .right {
  width: 30%;
  text-align: right;
}

.detailed-list .detail {
  float: left;
  margin-right: 20px;
  .ellipsis;
}

.detailed-list .status {
  width: 5px;
  height: 100%;
  background: @on-time-color;
  position: absolute;
  left: 0;
  top: 0;
}

.draft .status.status {
  background: #b4b4b4;
}

.overdue .status, .behind-schedule .status {
  background: #E96267;
}

.at-risk .status {
  background: #fff3a3;
}

.detailed-list li:hover {
  background: rgba(255, 255, 0, .05);
  .progress {
    opacity: 1;

    span {
      opacity: 1;
    }
  }
}

/** Task List **/

.completed-task {
  text-decoration: line-through;
  background-color: transparent;
  color: #aaa;
}

.task-list {
  li {
    border-top: 1px solid #eee;
    height: 34px;
    line-height: 34px;
    padding: 0 297px 0 46px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    margin: 0;
  }

  input {
    height: 100%;
    width: 100%;
    border: none;
    padding: 0;
    .ellipsis;
    box-shadow: none;
    background: none;

    &:focus, &:active {
      outline: none;
    }

    //hide the X in that shows up in IE10
    &::-ms-clear {
      display: none;
    }
  }

  li.selected input, li:hover input, li.pseudo-hover input {
    background-color: transparent;
  }

  li div {
    float: left;
    margin: 0 4px;
    cursor: pointer;
  }

  .sort-handle {
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;

    cursor: move;
    background: transparent url(../images/tasks/sort-handle.png) no-repeat 0 center;
    opacity: 0;
    transition: all .2s linear;
  }

  li:hover .sort-handle {
    opacity: 1;
  }

  .task-status-indicators;

  .list-header {
    padding-left: 15px;
    border-top: none;
    background: none;
    box-shadow: none;
    margin-top: 20px;
    color: @dark-blue;

    .sort-handle {
      display: none;
    }
    .is-task-completed, .view-task {
      display: none;
    }

    .task-details, input {
      font-size: 18px;
    }

    & + li {
      border-top: none !important;
    }

    &.selected, &:hover {
      background-color: transparent !important;

      input {
        background-color: transparent !important;
      }
    }
  }

  .task-details {
    width: 100%;
    .ellipsis;
  }

  .task-due-date {
    position: absolute;
    right: 0;
    width: 98px;
    text-align: right;
    margin-right: 20px;
    .ellipsis;
  }

  .task-list-icon {
    font-size: 17px;
  }

  .task-actions {
    position: absolute;
    right: 0;
    width: 128px;
    text-align: right;
    margin-right: 10px;
    display: none;
    padding: 0 !important;
  }

  .task-actions div {
    float: right;
    cursor: pointer;
    font-size: 17px;
    margin: 17px 15px 0 0;

    &:first-child {
      margin-right: 0;
    }

    &:hover {
      color: @activeTextColor1;
    }
  }

  //this is for the task details page
  .task-contents .task-actions div {
    font-size: 14px;
    margin-top: 0;
  }

  .task-meta {

    position: absolute;
    right: 130px;
    top: 0;
    width: 25px;

    .has-notes {

      float: right;
      color: #aaa;
      top: 17px;
      position: relative;

      &:hover {
        color: #aaa !important;
      }
    }
  }

  .task-assigned {
    width: 150px;
    position: absolute;
    right: 150px;
    top: 0;
    cursor: default;
    display:none;

    .user-image {
      height: 24px;
      width: 24px;
      display: inline-block;
      margin-right: 0;
      position: absolute;
      top: 4px;
      left: 5px;

      img {
        vertical-align: top;
      }
    }

    .tag {
      position: relative;
      color: #888;
      border-radius: 4px;
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      vertical-align: middle;
      display: inline-block;
      width: 100%;
      .ellipsis;
      font-size: 12px;
      cursor: pointer;
      padding-left: 35px;

      &:hover {
        background-color: @itemHoverBackgroundColor;
      }
    }
  }

  li:hover {
    .task-completed {
      opacity: .6;
    }

    .task-due-date {
      display: none;
    }

    .task-actions {
      display: block;
    }

    .task-meta {
      display: block;
    }
  }

  .completed {
    .completed-task;
  }
}

.status-indicators {
  top: 50%;
  margin-top: -8px !important;
  position: absolute;
  left: 20px;
  height: 16px !important;
}

.list-header {
  .status-indicators {
    left: 0;
    cursor: default;
    .is-task-completed {
      display: none;
    }
  }
}

.task-status-indicators {
  .is-task-completed, .retry-save, .saving-indicator {
    position: absolute;
  }

  .is-task-completed {
    left: 0;
    height: 16px;
    width: 16px;
    background: none;
    border: 2px solid #D1E0EE;
    border-radius: 4px;

  }

  .saving-indicator {
    left: 0px;
    height: 16px !important;
    width: 16px;
    background: transparent url(../images/tasks/task-saving.gif) no-repeat 0 0;
    display: none;
  }

  .retry-save {
    height: 14px !important;
    width: 14px;
    margin: 10px 0 0 10px;
    left: 14px;
    background-image: url(../images/glyphicons-halflings.png);
    background-repeat: no-repeat;
    background-position: 0 -120px;
    cursor: pointer;
    opacity: .5;
    display: none;
  }

  .saving {
    .is-task-completed {
      display: none;
    }

    .saving-indicator {
      display: block;
    }

    .retry-save {
      display: none;
    }
  }

  .error-saving {
    .is-task-completed {
      display: none;
    }

    .saving-indicator {
      display: none;
    }

    .retry-save {
      display: block;
    }
  }
}

.task-list {

}

#tasks-list {
  margin-bottom: 0 !important;
}

.completed-task-checkbox {
  background-image: url(../images/tasks/task-complete.gif) !important;
  background-position: center center;
  background-size: 18px !important;
  border: none !important;
}

#completed-tasks-list {
  li {
    background-color: #fff;
  }

  [disabled=disabled] {
    background: transparent;
  }

  .task-details {
    .completed-task;
  }

  .sort-handle {
    display: none;
  }

  .is-task-completed {
    .completed-task-checkbox;
  }

  .task-due-date {
    display: none;
  }

  .flag-task {
    display: none;
  }
}

#secondary-menu{

  a{
    color:#798BA3;
    opacity:.7;
    transition:opacity .2s ease;
    margin-right:20px;

    &:hover{
      opacity:1;
    }
  }

  @media(max-width:1024px){
    margin-top:4px;
  }
}
#logo{
  display:inline-block;
  position:relative;
  top:24px;
  font-size: 14px;
  color: #fff;
  background: #798BA3;
  padding: 6px 10px;
  border-radius: 3px;

  a{
    color:#fff;
    text-decoration:none;
  }

  span{
    margin-right:6px;
  }

  @media(max-width:1024px){
    left:4%;
    top:8px;
  }
}

.link-menu {
  font-size: 0;
  margin: 0;
  position:relative;
  top:25px;

  ul {
    margin: 0;
  }
  li {
    background: #fff;
    display: inline-block;
    margin: 0;
    text-align: center;
    cursor: pointer;
    font-size: 13px;

    a {
      color: @text-color;
      text-transform: uppercase;
      text-decoration: none;
      //border-bottom:1px solid rgba(255, 255, 255, .3);
      display: inline-block;
      //font-weight:bold;
      margin: 0;
      border-radius:2px;

      padding: 6px 10px;
    }

    &.active {
      a {
        color:#27AAFD;

      }
      //background:#27AAFD;
      //border-bottom: 3px solid @bright-blue;
    }

    &:first-child{}
  }

  @media (max-width:1024px){
    display:none;
  }
}

#boards-list {
  padding: 40px 0;
  margin: 0 auto;
  max-width:1200px;

  ul{
    .clearfix;
  }


  li {
    list-style: none;
  }

  .board {
    width: 22%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    margin: 0 3% 30px 0;
    float: left;
    background: #fff;
    position:relative;

    &:after{
      content:'';
      display:block;
      padding-bottom:100%;
    }
  }

  a, .board-content{
    text-decoration: none;
    color: @text-color;
    display: block;
    width: 100%;
    height: 100%;
    padding: 40px;
    position:absolute;
    top:0;
    left:0;


    p {
      font-size: 14px;
      .multi-line-ellipsis(1.4em, 3);

    }
  }

  p {
    font-size: 14px;
  }
  .new-board {
    text-align: center;
    padding: 40px;
    cursor:pointer;

    h4 {
      margin-bottom: 5px;
    }
  }

  .new-board-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    background: #54DC83;
    margin-bottom: 10px;
    text-align: center;
    font-size: 20px;
    line-height: 60px;
    font-weight: 300;
    margin-top: 10px;
  }
  h4 {
    color: @darker-text-color;
    margin: 0 0 20px 0;
    font-weight: 300;
  }

  .board-settings {
    position: absolute;
    top: 9px;
    right: 10px;
    opacity: .5;
    transition:opacity .2s ease;
    cursor:pointer;
    z-index:9;

    &:hover{
      opacity:1;
    }
  }

  @media(max-width:1500px){
    max-width:80%;
  }

  @media(max-width:1200px){
    .board-content{
      padding-top:20px;
    }
  }

  @media(max-width:1024px){
    .board{
      width:44%;
    }

    .board-content{
      padding-top:40px;
    }
  }

  @media(max-width:667px){
    .board{
      width:100%;

      a, .board-content{
        position:relative;
      }

      &:after{
        display:none;
      }
    }
  }
}

#file-list-wrapper{
  background:#fff;

  li{
    border-top: 1px solid #eee;



    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    margin: 0;
  }
}

#archived-boards{
  ul{
    visibility:hidden;
    opacity:0;
    transition:opacity .2s ease;
  }

  h5{
    text-transform:uppercase;
    border-bottom:1px solid rgba(0, 0, 0, .1);
    padding:10px;
    font-size:16px;
    cursor:pointer;
    font-weight:bold;
    transition:all .2s ease;

    span{
      float:right;
    }

    &:hover{
      color:@dark-blue;
    }
  }

  span.open{
    display:none;
  }

  &.open{
    ul{
      visibility:visible;
      opacity:1;
    }

    span.open{
      display:block;
    }

    span.closed{
      display:none;
    }
  }
}

.inline-popup .dropdown-button-dropdown{
  display:block;
  box-shadow:none;
  border:none;
  position:relative;
}



.filter-dropdown {
  display: inline-block;
  position: relative;
  z-index: 99;

  &:focus {
    outline: none;
  }

  .filter-button {

    line-height: 30px;
    height: 30px;
    border-radius: 2px;
    z-index: 1;
    cursor: pointer;
    .disable-selection;

    &:hover {
      color: @activeTextColor1;
    }

    span {
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
  }

  .dropdown-menu {
    z-index: -1;
    margin-top: -1px;
    background: #fff;
  }

  .caret {
    position: absolute;
    top: 15px;
    right: 6px;
    opacity: .6;
  }

  &.open {

    .dropdown-menu {
      border-radius: 2px;
    }
  }

  li {
    position: relative;
  }

  .selected:after {
    content: ' ';
    height: 6px;
    width: 6px;
    position: absolute;
    left: 5px;
    top: 10px;
    background: @on-time-color;
    border-radius: 50%;
  }

  input {
    height: 25px;
    margin: 0 10px 5px 10px;
    width: auto;
    border-radius: 0;
    border: 1px solid #ddd;
    width: 138px;
    padding: 0 10px;
  }

  .divider {
    background-color: #eee !important;
  }

}

.search-results-message, .task-list-message {
  z-index: 99;
  padding: 5px 20px;
  margin-bottom: 10px;
  color: #666;
  font-style: italic;
  background: #fafafa;
  border: 1px solid #eee;

  .close {
    display: block;
    position: absolute;
    top: 6px;
    right: 15px;
    cursor: pointer;
  }
}

.search-results-message {
  background: #FFF9CE;
  border: 1px solid #F9E652;
}

.at-risk .task-due-date {
  color: #F7941D;
  font-weight: bold;
}

.overdue .task-due-date {
  color: #E96267;
  font-weight: bold;
}


#file-view-type, #dashboard-project-view-type {

  li {
    width: 36px;

    span {
      .icon;
    }
  }

}

/** File List **/
.file-list {

  .file-title, .file-type, .file-uploader-name, .file-create-date, .file-extension {
    .ellipsis;
  }

  .file-extension {
    width: 10%;
  }
  .file-title {
    width: 55%;
  }

  .file-type {
    width: 10%;
  }

  .file-uploader-name {
    width: 20%;
  }

  .file-create-date {
    width: 5%;
  }

  li {
    background-position: 10px center;
    background-repeat: no-repeat;
  }

  .filename {
    width: 100%;
    .ellipsis;
  }

  .upload-date {
    position: absolute;
    right: 160px;
    width: 160px;
  }

  .uploaded-by {
    position: absolute;
    right: 0;
    width: 160px;
  }

  span {
    font-size: 12px;
    color: #fff;
    margin-right: 4px;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 2px 10px;
    background: #b2b2b2;
  }

  .zip span {
    background-color: #fdbb70;
  }
  .pdf span {
    background-color: #d04f3a;
  }
  .text span {
    background-color: #45bf7b;
  }
  .code span {
    background-color: #3a88d0;
  }
  .video span {
    background-color: #ce87eb;
  }
  .audio span {
    background-color: #3ab2d0;
  }
  .image span {
    background-color: #fd7037;

  }

}

.files-preview-list {
  margin: 0;

  .file-list-preview {
    position: absolute;
    width: 300px;
    list-style: none;
    margin: 0 20px 10px 0;
    float: left;

    -webkit-background-clip: padding-box;

    &:hover {
      .file-dv {
        border: 1px solid #00a8ff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

      }
    }
  }

  .file-name {
    font-size: 85%;
    font-weight: bold;
    color: @dark-blue;
    margin-right: 20px;
    .ellipsis;
  }

  .file-options {
    position: absolute;
    top: 15px;
    right: 15px;
    border: 1px solid #bbb;
    height: 14px;
    width: 14px;
    padding: 4px 2px 0 2px;
    cursor: pointer;
    overflow: visible;

    .border-radius(3px);
    transition: all linear .2s;

    .caret {
      opacity: .5;
      transition: all linear .2s;
    }

    &:hover {
      border: 1px solid #666;
      box-shadow: 0 0 4px rgba(0, 0, 0, .2);

      .caret {
        opacity: 1;
      }
    }

    .dropdown-menu {
      left: -73px;
      top: 16px;
    }
  }

  .file-meta-wrapper {

    padding: 10px 20px;
    position: relative;

    .file-meta {
      font-size: 85%;
      color: @darker-text-color;

      span {
        color: @darker-text-color;

      }
    }
  }

  .animated {
    transition: all .5s ease-in-out;
  }

  .file-dv {
    box-sizing: content-box;
    width: 260px;
    padding: 20px;
    position: relative;
    background-color: #fff;
    background-image: url(../images/files/unknown-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 90px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

    .clearfix;

    &.audio {
      background-image: url(../images/files/audio-bg.png);
    }

    &.image {
      background-image: url(../images/files/image-bg.png);
    }

    &.video {
      background-image: url(../images/files/video-bg.png);
    }

    &.pdf, &.code, &.txt, &.document {
      background-image: url(../images/files/document-bg.png);
    }

    &.loaded {
      background-image: none !important;
      min-height: 0;
    }
  }

  .document-viewer-wrapper {
    margin: 0;
    float: none;
    width: inherit;
    overflow: hidden;
    -webkit-background-clip: padding-box;
    opacity: 0; //TODO: this belongs as a default in the document viewer plugin
    border-radius:0;
  }

  .loaded .document-viewer-wrapper {
    opacity: 1;
  }

  .error .document-viewer-wrapper {
    opacity: 1;;

    .dv-markup {
      background: transparent;
    }
  }

  .error-loading, .loading-message, .unsupported-type {
    width: 100%;
    position: absolute;
    bottom: -16px;
    margin-top: -4px;
    text-align: center;
    font-size: 10px;
  }

  .error-loading, .unsupported-type {
    color: #aaa;
  }

  .loading-message {
    color: #006cff;
  }

  .document-viewer-outer {
    border: none;
    box-shadow: none;
  }

  .document-viewer {
    padding: 0 !important;
  }

  .scrollable {
    width: 100%; //TODO: this belongs as a default in the document viewer plugin
  }

  .viewport {
    overflow: hidden;
  }

  .pdf-menu {
    display: none;
  }

  .audio .ttw-video-player {
    padding-top: 2px;
  }

  .audio .dv-error {
    margin: 0 auto;
    padding: 0;
    font-size: 90%;
  }

  .audio .ttw-video-player {
    height: 100%;
  }

  .ttw-video-player {
    padding: 0;
  }

  .ttw-video-player .player {
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 0 10px;
    width: 554px;
    height: 33px;
  }

  .progress-wrapper {
    margin-right: 0 !important;
  }

  .volume-wrapper {
    display: none;
  }

  .file-list-filename {
    text-align: center;
  }

  .prettyprint {
    padding: 0 !important;
    margin: 0 !important;
  }

  .dv-image {
    padding: 0;
    display: block;
  }

  ol {
    list-style: none;
    margin: 0;
    font-size: 95%;

    li {
      line-height: 1.2 !important;
    }
  }
}

#file-list-simple-tiles {
  margin: 0;
  position: relative;
  top: 1px;
  left: 1px;

  .file-simple-tile {
    width: 170px;
    position: relative;
    list-style: none;
    margin: 0 20px 10px 0;
    float: left;
    text-align: center;
    cursor: pointer;

    .file-icon {
      width: 170px;
      height: 120px;
      -webkit-background-clip: padding-box;
      background-position: center center;
      background-repeat: no-repeat;
      opacity: .9;
      background-image: url(../images/files/unknown-bg2.jpg);
    }

    &.audio .file-icon {
      background-image: url(../images/files/audio-bg2.jpg);
    }

    &.image .file-icon {
      background-image: url(../images/files/image-bg2.jpg);
    }

    &.video .file-icon {
      background-image: url(../images/files/video-bg2.jpg);
    }

    &.pdf .file-icon {
      background-image: url(../images/files/pdf-bg2.jpg);
    }

    &.code .file-icon, &.txt .file-icon, &.document .file-icon {
      background-image: url(../images/files/document-bg2.jpg);
    }

    .file-name {
      width: 100%;
      font-size: 14px;
      color: #444;
      height: 50px;
      background: #fafafa;
      border-radius: 8px;
      text-align: center;
      padding: 5px 20px;
      overflow: hidden;
    }

    &:hover {
      .file-icon {
        opacity: 1;
      }

      .file-name {
        background: @itemHoverBackgroundColor;
        color: @activeTextColor1;
        border-radius: 0;
      }

      outline: 1px solid @activeTextColor1;

    }

  }

  .file-meta-wrapper {
    border-top: 1px solid #eee;
    background: #fefefe;
    padding: 10px 20px;
    position: relative;

    .file-meta {
      font-size: 85%;
      color: #999;

      span {
        color: #ccc;
        font-weight: bold;
      }
    }
  }

  ol {
    list-style: none;
    margin: 0;
    font-size: 95%;

    li {
      line-height: 1.2 !important;
    }
  }
}

.file-view {
  .clearfix;

  .file-view-inner {
    max-width: 900px;
    margin: 0 auto;
  }

  .dv-image {
    width: 100%;
  }

  .file-dv, .file-meta-wrapper {
    float: left;
  }

  .file-dv {
    width: 640px;
  }

  .file-meta-wrapper {
    width: 250px;
    padding: 20px;
  }

  .document-viewer-wrapper {
    margin: 0 auto;
    float: none;
    display: block;

    .button {
      box-shadow: none;
      border: none;
    }

    .progress {
      background: none;
    }

    .progress-bg, .volume {
      height: 7px;
    }
  }

  .file-name {
    font-weight: bold;
    color: #888;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .file-notes {
    margin-bottom: 20px;
  }

  .file-meta {
    color: #888;
    margin: 4px 0;
    font-size: 90%;
    span {
      color: #333;
      font-weight: bold;
    }
  }

  .error-loading, .loading-message {
    width: 100%;
    text-align: center;
    padding: 40px 0;
  }

  .error-loading {
    color: #ff0000;
  }

  .loading-message {
    color: #006cff;
  }
}

.file-actions {
  width: 100%;
  .smart-menu-items li {
    padding: 0 2px !important;
  }

  .more .sidebar-icon {
    width: 14px !important;
    margin-right: 2px;
  }

  .more {
    top: 4px;
    position: relative !important;
    padding: 0 5px !important;
  }
}

//todo:hacks until we fix the button situation
hr {
  width: 100%;
}

.file-actions {
  width: 100%;
  float: left; //hacks until i work out button grouping
  .button {
    float: left;
  }

  .right {
    float: left;
    clear: both;
  }

  .button {
    margin: 5px 3px 5px 0 !important;

  }

}

/** Messages List **/

#dashboard-filter-wrapper, #dashboard-sort-wrapper {
  display: inline-block;
  position: relative;
  top: 3px;
  z-index: 99;
}

/** Document **/
.document, .invoice {
  border: 1px solid #cfcfcf;
  background: #fff;
  .box-shadow-2(0 1px 3px rgba(0, 0, 0, 0.1), 0 0 10px 4px rgba(0, 0, 0, 0.03));
  .clearfix();
}



.preview-notification {
  background: #FFF9CE;
  border: 1px solid #F9E652;
  max-width: 750px;
  padding: 15px 200px 15px 20px;
  margin: 0 auto;
  position: relative;

  .button {
    position: absolute;
    right: 20px;
    top: 12px;
  }
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
  .ellipsis;
  max-width: 75%;
  font-size: 12px;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0;
}

.select2-container .select2-selection--multiple {

}

.select2-container .select2-selection--single {
  height: 32px;
  border-radius: 3px;
  border-color: #D9D9D9;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
}



.task-drag-helper {
  border: 1px solid #E6F0F9;
  padding: 0 20px;
  height: 35px;
  line-height: 35px;
  background: #F2F8FD;
}



.icon-add {
  background-position: -408px -96px;
}

/** Filter Form **/
.filter {
  width: 70%;
  height: 30px;
  padding-right: 30px;
  position: relative;

  #gradient .vertical(#fff, #f9f9f9);
  input {
    width: 95%;
    height: 20px;
    padding: 4px 2.5%;
    position: relative;
    right: -1px;
    z-index: 2;
    #gradient .vertical(#f9f9f9, #fff);
    border: 1px solid rgba(0, 0, 0, .2);
    .border-radius(3px 0 0 3px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);

    &:focus {
      box-shadow: none;
    }
  }

  .choose-filter-button {
    width: 28px;
    height: 28px;
    float: left;
    border: 1px solid rgba(0, 0, 0, .2);
    .border-radius(0 3px 3px 0);
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: transparent url(../images/dropdown-arrow.png) no-repeat center center;
  }

  ul {
    position: absolute;
    min-width: 100%;
    z-index: 999999;
    margin: 0;
    display: none;
    .border-radius(3px);
    .box-shadow-2(0 0 4px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .2));
    #gradient .vertical(#fff, #f9f9f9);

    &.active {
      display: block;
      top: 32px;
    }
  }

  li {
    list-style: none;
    padding: 5px 10px;

    &:hover {
      background-color: rgba(0, 0, 0, .02);
    }
  }
}

/** Modals **/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999998;
  overflow-y: auto;
  overflow-x: hidden;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
  background-image: radial-gradient(ellipse, rgba(188, 198, 206, .15) 80%, rgba(98, 112, 120, .2));

  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;

  &.showing {
    opacity: 1;
    visibility: visible;
  }
}


.modal {
  //we want to use the default browser box-sizing rather than border box, because sometimes we want to set the width
  //of the modal based on the with of the view that makes up it's content. Using content-box allows to set the width
  //of the modal equal to the width of the content view. If we used border-box, we would have to set the width of the
  //modal to 'content-width + modal horizonal padding', which is difficult to do since the width needs to be set
  //before the modal is actually added to the dom
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 69px 30px 80px 30px;
  display: block;
  overflow: hidden; //target width of 420px, since we're using content-box rather than border-box
  width: 378px;
  margin: 0 auto;
  top: 20%;
  .modal-basic;
  background: #fff;
  .clearfix;




  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;




  &.alert {
    padding-top: 20px;

    &.success p {
      color: #40b842;
      font-weight: bold;
    }

    p {
      margin-bottom: 0;
    }
  }

  //TODO: Delete the modal rules in the twitter stylesheet, or refactor to keep eveything in sync. Perhaps twitters file structure makes the most sense?
  .modal-info {
    height: @panel-info-height - 10;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;

    h3 {
      line-height: @panel-info-height - 10;
      padding-left: 20px;
      display: inline-block;
      font-size: 17px;
      font-weight: normal;
      margin-top: 1px;
      color: #000;
      font-weight: 600;
    }

    .close {
      font-size: 17px;
      font-weight: normal;
      position: absolute;
      right: 9px;
      top: 12px;
      cursor: pointer;

      opacity: .4;

      &:hover {
        opacity: 1;
      }
    }
  }

  form {
    margin-bottom: 0;
    float: left;
    width: 100%;
  }

  .form;
}

.modal-overlay.showing .modal {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}


.error-message {

  display: block;
  clear: both;
  font-size: 11px;
  color: #ff0000;
  .ellipsis;

}

.form {
  input, select, textarea {
    padding: 12px 0 12px 0;
    display: block;
    margin: 0 0 20px 0;
    border-radius: 3px;
  }



  input[type=text], input[type=date]{
    margin-top:20px;
  }

  .select2-container {
    margin-bottom: 20px;
    margin-top:10px;
  }

  .select2-container--default .select2-selection--single{
    border:none;
    border-bottom:1px solid #D9D9D9;
  }
  .select2-container .select2-selection--single .select2-selection__rendered{
    padding-left:0;
  }

  input:focus, textarea:focus {
    box-shadow: none !important;
    border-color: rgba(82, 168, 236, 0.8) !important;
  }

  input[type=text], input[type=number], input[type=password], textarea, select, .select2-container {
    width: 100% !important;
  }

  input[type=text], input[type=number], input[type=password], textarea {
    border: none;
    border-bottom: 1px solid #ddd;
  }

  input[type=text], input[type=number], input[type="date"], input[type=password], select {
    height: 38px; //        line-height:32px;
  }

  input[type=date], input.date {
    width: 176px;

    &:last-child {
      margin-bottom: 10px;
    }
  }

  input[type=submit] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #56A8FB;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0;
    height: 60px;
    border-radius: 0;
    border: none;
  }

  select {
    width: 100%;
  }

  .field {
    position: relative;

    &.inline {
      display: inline-block;
      vertical-align: top;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  label {
    color: @darker-text-color;
    line-height: 1;
    margin-bottom: 4px;
    display: block;
    font-size: 14px;
    font-weight: bold;
  }

  .has-error label {
    top: 26px;
  }

  .radio {
    display: block;

    input {
      display: inline-block;
    }
  }
  .error {
    .error-message;

  }
}


/* For the details, see:
http://flowplayer.org/tools/dateinput/index.html#skinning */

/* the input field */

/* calendar root element */
#calroot {
  /* place on top of other elements. set a higher value if nessessary */
  z-index: 9999999;
  margin-top: -1px;
  width: 202px;
  padding: 2px;
  background-color: #fff;
  font-size: 11px;
  border: 1px solid #aaa;
  .border-radius(4px);
  box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}

/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {
  padding: 2px 0;
  height: 22px;
}

#caltitle {
  font-size: 15px;
  color: #0150D1;
  float: left;
  text-align: center;
  width: 155px;
  line-height: 20px;
  text-shadow: 0 1px 0 #ddd;
}

#calnext, #calprev {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../images/glyphicons-halflings.png");
  background-position: -432px -72px;
  background-repeat: no-repeat;
  float: left;
  cursor: pointer;
  margin-top: 3px;
  margin-left: 6px;
  opacity: .5;

  &:hover {
    opacity: 1;
  }
}

#calnext {
  background-position: -456px -72px;
  float: right;
  margin-left: 0;
  margin-right: 6px;
}

#calprev.caldisabled, #calnext.caldisabled {
  visibility: hidden;
}

/* year/month selector */
#caltitle select {
  font-size: 10px;
}

/* names of the days */
#caldays {
  padding: 0 0 6px 0;
  height: 20px;
  border-bottom: 1px solid #DDD;
}

#caldays span {
  display: block;
  float: left;
  width: 28px;
  text-align: center;
}

/* container for weeks */
#calweeks {
  background-color: #fff;
  margin-top: 4px;
}

/* single week */
.calweek {
  clear: left;
  height: 22px;
}

/* single day */
.calweek a {
  display: block;
  float: left;
  width: 27px;
  height: 20px;
  text-decoration: none;
  font-size: 11px;
  margin-left: 1px;
  text-align: center;
  line-height: 20px;
  color: #666;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

/* different states */
.calweek a:hover, .calfocus {
  background-color: #ddd;
}

/* sunday */
a.calsun {
  color: red;
}

/* offmonth day */
a.caloff {
  color: #ccc;
}

a.caloff:hover {
  background-color: rgb(245, 245, 250);
}

/* unselecteble day */
a.caldisabled {
  background-color: #efefef !important;
  color: #ccc !important;
  cursor: default;
}

/* current day */
#calcurrent {
  background-color: #498CE2;
  color: #fff;
}

/* today */
#caltoday {
  background-color: #333;
  color: #fff;
}

/** Forms **/

/* Harvest Chosen Plugin */

.select2-dropdown {
  z-index: 99999999;
}

.button.red, .danger {
  color: white;

  background-color: #ea736a;;

  cursor: pointer;

  &:hover {
    background-color: #ea736a !important;
    color: #fff !important;
  }
}

.button.blue.fancy, input[type=submit].fancy {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  background-color: #2879C0;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5DA3E0), color-stop(25%, #5DA3E0), to(#2879C0));
  background-image: -webkit-linear-gradient(#5DA3E0, #5DA3E0 25%, #2879C0);
  background-image: -moz-linear-gradient(top, #5DA3E0, #5DA3E0 25%, #2879C0);
  background-image: -ms-linear-gradient(#5DA3E0, #5DA3E0 25%, #2879C0);
  background-image: -o-linear-gradient(#5DA3E0, #5DA3E0 25%, #2879C0);
  background-image: linear-gradient(#5DA3E0, #5DA3E0 25%, #2879C0);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5da3e0', endColorstr='#2879c0', GradientType=0);
  border-color: #4493D8 #2977BB #0D5A9D;
  border-width: 1px;
  border-style: solid;
  .border-radius(3px);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  -ms-transition: 0.1s linear all;
  -o-transition: 0.1s linear all;
  transition: 0.1s linear all;
  outline: none;
}

.button.small {
  padding: 2px 10px;
  line-height: 21px;
}

.button.tiny {
  padding: 2px 10px;
  line-height: 14px;
  font-size: 9px;
}

input[type=submit], .submit {
  padding: 7px 24px !important;
  float: right;
  text-decoration: none !important;
}

input[type=submit].small {
  padding: 4px 10px !important;
}

.button {
  .basic-button;

}

.clear-button {
  color: #444;
}

.button.dark {
  color: white;
  margin-left: 10px;
  background: #444;
  cursor: pointer;

  .icon {
    color: #fff;
  }
}

.button.green {
  background: #62AE47;
  color: #fff;
  border: none;
}

.clear-button {
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;

  .icon {
    margin-right: 10px;
  }

  &:hover {
    color: @activeTextColor1;

    .icon {
      color: @activeTextColor1 !important;
    }
  }
}

//todo:resolve with panel action buttons
.button.flat {
  #gradient .vertical(#f5f5f5, #f1f1f1);
  border: 1px solid #DCDCDC;
  box-shadow: none;

  .icon {
    margin-right: 10px;
    position: relative;
    top: 1px;
  }

  &:hover {
    #gradient .vertical(#ececec, #e8e8e8);
    border: 1px solid #ccc;
  }
}

a.button:hover {
  text-decoration: none;
}

input[type=submit] {
  float: right;
}

/** Buttons **/
@button-border-color: #ccc;

.button-set {
  display: block;
}

@button-set-height: 30px;

.button-set {
  opacity: 1;
  height: @button-set-height;
  margin: 0;
  display: inline-block;
  .border-radius(3px);

  li {
    .disable-selection;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-family: @font-family;
    font-size: 12px;
    height: @button-set-height;
    line-height: @button-set-height - 1;
    list-style: none;
    margin: 0 0 0 -1px;
    text-align: center;
    vertical-align: middle;
    width: 75px;

    &:first-child {
      .border-radius(3px 0 0 3px);
    }

    &:last-child {
      .border-radius(0 3px 3px 0);
      border-right: none;
    }

    &:hover {
      background: @itemHoverBackgroundColor;
    }

    &.selected {
      span {
        color: @activeTextColor1 !important
      }

    }
  }
}

.solid-button-set {
  opacity: 1;
  height: @button-set-height;
  margin: 0;
  .border-radius(3px);

  li {
    .button;
    border-color: transparent;
    border-radius: 0;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    display: block;
    float: left;
    margin: 0;
    background: #f5f5f5;

    &:first-child {
      .border-radius(4px 0 0 4px);
    }

    &:last-child {
      .border-radius(0 4px 4px 0);
    }

    &:hover {
      box-shadow: rgba(0, 0, 0, .02) 0px 0px 5px 0px;
      color: @active-blue;
    }

    &.selected, &.selected:hover, &:active {
      color: #000;
      box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
    }
  }

}

.button-set.small, .beveled-button-set.small {
  height: 25px;

  li {
    height: 25px;
    padding: 2px 10px;
    font-size: 11px;
  }
}

.panel .button-set {
  display: inline-block;
}

.button .add-item {
  position: relative;
  margin-right: 5px;
  top: -2px;
}

.button .edit-notes {
  background-position: 0 -72px;
  position: relative;
  margin-right: 5px;
}

.tabs {
  list-style: none;
  border-bottom: solid 1px #E6E6E6;
  display: block;
  height: 40px;
  padding: 0;
  margin-bottom: 20px;
}

.tabs dd:first-child, .tabs li:first-child {
  margin-left: 0;
}

.tabs dd.active {
  border-top: 1px solid #ccc;
  margin-top: -1px;
}

.tabs dd {
  display: block;
  float: left;
  padding: 0;
  margin: 0;
}

.tabs dd.active a {
  cursor: default;
  color: #3C3C3C;
  background: white;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  font-weight: bold;
}

.tabs dd a, .tabs li > a {
  color: #6F6F6F;
  display: block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0px 23.8px;
}

ul.tabs-content {
  display: block;
  margin: 0 0 20px;
  padding: 0 10px;
}

.tabs-content {
  clear: both;
  .clearfix;
}

ul.tabs-content > li.active {
  display: block;

}

ul.tabs-content > li {
  display: none;
  position: relative;
  .clearfix;
}

// DROPDOWN MENUS
// --------------

// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
  position: relative;
}

.dropdown-toggle {
  // The caret makes the toggle a bit too tall in IE7
  *margin-bottom: -3px;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

// Dropdown arrow/caret
// --------------------
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  opacity: .3;
}

// Place the caret
.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px;
}

.dropdown:hover .caret,
.open .caret {
  opacity: 1;
}

// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 4px 0;
  margin: 1px 0 0; // override default ul
  list-style: none;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box; // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Links within the dropdown menu
  a, span {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
  }
}

// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu li > span:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > span,
.dropdown-menu .active > a:hover,
.dropdown-menu .active > span:hover {
  color: #08c;
  text-decoration: none;
  background-color: #fff;
}

// Open state for the dropdown
// ---------------------------
.open {
  // IE7's z-index only goes to the nearest positioned ancestor, which would
  // make the menu appear below buttons that appeared later on the page
  *z-index: 1000;

  & > .dropdown-menu {
    display: block;
  }
}

// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
  // Reverse the caret
  .caret {
    border-top: 0;
    border-bottom: 4px solid #000;
    content: "\2191";
  }

  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}

.dropdown-menu .divider {
  height: 2px;
  margin: 8px 1px;
  overflow: hidden;
  background-color: #E5E5E5;
  border-bottom: 1px solid white;
}

// Typeahead
// ---------
.typeahead {
  margin-top: 2px; // give it some space to breathe
  .border-radius(4px);
}

.add-list-item, .edit-notes {
  opacity: .95;

  &:hover {
    opacity: 1;
  }
}

/** Scrollbars **/
.scrollable {
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100%;
}

.scrollable .viewport {
  height: 100%;
}

.scrollable .scroll-content {
  position: relative;
  width: 100%;
}

.scrollable .scrollbar {
  float: right;
  width: 6px;
  position: absolute;
  right: 0px;
  top: 0;
  opacity: 0;
  transition: all .2s linear;
}

.scrollable:hover .scrollbar {
  opacity: 1;

}

.scrollable .track {
  height: 100%;
  width: 6px;
  position: relative;
  padding: 0 1px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
}

.scrollable .thumb {
  height: 20px;
  width: 6px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
}

.scrollable .thumb {
  background-color: rgba(0, 0, 0, 0.6);
}

.scrollbar.disable {
  display: none;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

//upload dialog
#cancel-all {
  display: none;
}

.uploading #cancel-all {
  display: block;
}

.add-file-button {
  position: relative;
}

#fileupload {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

//progress bars

.progress-bar-wrapper {
  margin: 10px auto 9px auto;
  border-bottom: 1px solid #ddd;
  padding: 10px 10px 20px 10px;
  width: 100%;

  .filename {
    color: #666;
    font-size: 85%;
    width: 85%;
    float: left;
  }

  .cancel, .status {
    width: 15%;
    float: right;
    font-size: 85%;
    text-align: right;
  }

  .status {
    display: none;
  }

  .progress {
    height: 14px;
    margin-top: 5px;
    background: #EBEBEB;
    border-radius: 10px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
  }

  .progress >
  span {
    position: relative;
    float: left;
    margin: 0 -1px;
    min-width: 30px;
    height: 14px;
    line-height: 8px;
    text-align: right;
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #F0AD24 #EBA310 #C5880D;
    background: #ffe393; /* Old browsers */
    background: -moz-linear-gradient(top, #ffe393 0%, #ffdf92 70%, #fdcc63 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffe393), color-stop(70%, #ffdf92), color-stop(100%, #fdcc63)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffe393 0%, #ffdf92 70%, #fdcc63 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffe393 0%, #ffdf92 70%, #fdcc63 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffe393 0%, #ffdf92 70%, #fdcc63 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffe393 0%, #ffdf92 70%, #fdcc63 100%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe393', endColorstr='#fdcc63',GradientType=0 )"; /* IE6-9 */
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .progress >
  span span {
    padding: 0 8px;
    font-size: 10px;
    font-weight: bold;
    color: #404040;
    color: rgba(0, 0, 0, 0.7);
    text-shadow: 0 1px rgba(255, 255, 255, 0.4);
  }

  .progress >
  span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 18px;
    border-radius: 10px;
  }

}

.cancelled {
  padding: 5px 10px 10px 10px;

  .progress {
    height: 3px;

    span {
      height: 1px;
      position: relative;
      top: 1px;
      background: #555;
      background-image: none;
      border: none;
      box-shadow: none;
    }

    span span {
      display: none;
    }
  }

  .cancel {
    display: none;
  }

  .status {
    display: block;
  }
}

.complete {

  .progress >
  span {
    border-color: #95B961 #87A55B #738D4E;
    background-color: #CCC;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CCEB9B), color-stop(70%, #A9DC65), color-stop(100%, #89C443));
    background-image: -webkit-linear-gradient(top, #CCEB9B 0%, #A9DC65 70%, #89C443 100%);
    background-image: -moz-linear-gradient(top, #CCEB9B 0%, #A9DC65 70%, #89C443 100%);
    background-image: -ms-linear-gradient(top, #CCEB9B 0%, #A9DC65 70%, #89C443 100%);
    background-image: -o-linear-gradient(top, #CCEB9B 0%, #A9DC65 70%, #89C443 100%);
    background-image: linear-gradient(top, #CCEB9B 0%, #A9DC65 70%, #89C443 100%);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .cancel {
    display: none;
  }

  .status {
    display: block;
  }

}

#hidden, .hidden {
  position: absolute;
  top: 0;
  left: -9999999px;
  visibility: hidden;
}

#calendar-outer {
  padding: 0 20px 20px 20px;
}

#calendar {
  height: 100%;
  width: 98%;
  margin: 0 auto;
}

.fc-header {
  h2 {
    font-size: 18px;
    font-weight: normal;
  }
}

.fc-widget-header {
  border-width: 0 0 0 0 !important;
  color: #888;
  font-weight: normal;
}

.fc-day-number {
  color: #888;
}

.fc-today {
  background: #e7eef6;
  .fc-day-number {
    color: #3790f4;
    font-weight: bold;
  }
}

.fc-widget-content {
  border-color: #cbcbcb;
}

td.fc-first, td.fc-last {
  background-color: #fafafa;
}

#calendar {
  .has-tasks {
    background: #EDEFF5;
  }
}

#calendar-header {
  #task-filters {
    margin-top: 5px;
  }

  .date-name {

    line-height: 30px;
    margin-right: 10px;
    font-size: 16px;
  }

  .task-filter {

    margin-left: 10px;
  }

  #calendar-menu {

    > * {
      vertical-align: middle;
      display: inline-block;
    }
  }

  #calendar-controls {

  }

  #calendar-view-selector {

    width: 75px;
    margin-right: 10px;

  }
}

.calendar-event-item {
  position: relative;

  .task-status {
    width: 10px;
    height: 10px;
    .border-radius(4px);
    background: @on-time-color;
    border: 1px solid darken(@on-time-color, 30%);
    position: absolute;
    top: 4px;
    left: 5px;
    opacity: .7;
  }

  &.at-risk .task-status {
    background: @at-risk-color;
    border: 1px solid darken(@at-risk-color, 40%);
  }

  &.overdue .task-status {
    background: @overdue-color;
    border: 1px solid darken(@overdue-color, 30%);
  }

  .task-name {
    margin-left: 20px;
    color: #666;
    cursor: pointer;
    .ellipsis;
  }
}

.calendar-item-popup {
  width: 300px;
  background: #fff;
  padding: 20px 30px;
  position: absolute;
  z-index: 99;
  top: 20%;
  left: 50%;
  margin-left: -150px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);

  .close {
    position: absolute;
    top: 7px;
    right: 7px;
    height: 10px;
    width: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #888;
  }
}

#confirm-box {
  .message {
    margin: 20px 0 40px 0;
  }

  h3 {
    font-weight: normal;
  }

  .confirmation-buttons {
    font-size: 0;
    position: absolute;
    /* float: right; */
    bottom: 0;
    left: 0;
    width: 100%;
    border-top:1px #d9d9d9;
  }

  &.success .red.action {
    background: #58cf2c;

    &:hover {
      background: #58cf2c !important;
      border-color: #438d23;
    }
  }

  .button{
    height: 50px;
    width: 50%;
    padding: 2px 10px;
    line-height: 21px;
    border-radius: 0;
    border: none;


  }

  .cancel{
    background:#eee;
    color:@darker-text-color;
  }
}

.nano .slider {
  background: #111;
}



.no-activity {
  font-style: italic;
}

#project-details {

  h3 {
    -webkit-font-smoothing: antialiased;
  }

  h5.section-title {
    color: #000;
    font-size: 17px;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .status-indicator {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: @on-time-color;
    display: inline-block;
    position: relative;
    top: 0px;

    &.overdue, &.behind-schedule {
      background: @overdue-color;
    }

    &.at-risk {
      background: @at-risk-color;
    }

  }

  #top-details {

    height: 140px;
    overflow: hidden;

    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
    display: block;
    max-width: 1202px;
    margin: 20px auto;
    //get rid of white space that sits between inline block elements, because inline block takes into account newlines etc
    //http://stackoverflow.com/questions/6871996/css-two-inline-block-width-50-elements-dont-stack
    //http://stackoverflow.com/a/11456539
    font-size: 0;

    > div {
      display: inline-block;
      padding: 30px 10px 10px 10px;
      height: 100%;
      width: 20%;

      border-right: 1px solid rgba(0, 0, 0, 0.05);

      &:last-child {
        margin-right: 0;
        border: none;
      }

      span {
        color: #82929F;
        font-size: 80%;
      }
    }

    &.has-due-date > div {
      width: 16.66%;
    }

    h3 {
      margin-top: 5px;
      margin-bottom: 7px;
      .ellipsis;
    }

    h3.on-schedule {
      font-size: 20px;
    }

    h3.behind-schedule {
      font-size: 18px;
    }
    h5 {
      //text-transform: uppercase;
      color: #bbb; //            letter-spacing: -1px;
      font-size: 17px;
      .ellipsis;
    }
  }

  #main-dashboard {
    max-width: 1202px;
    margin: 20px auto;
  }

  #activity-stream-space {
    width: 65%;
    margin-right: 5%;
  }

  .project-stats {
    width: 30%;

    .icon {
      margin-right: 10px;
      color: #888;
    }
  }

  .project-action {
    color: #428bca;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
  #activity-stream-space, .project-stats {
    float: left;
  }

  .activity-stream {
    margin: 0 5% 0 0;

    h3 {
      margin-bottom: 20px;
      font-size: 14px;
    }

    .activity-description {
      color: #82929F;
      font-weight: normal;
    }
  }

  .people-section {
    padding-top: 20px;

  }

  .project-info {
    padding: 0 20px;
  }
}

#project-details .people-list {

  margin-left: -10px;
  li {
    width: 100%;
    padding: 16px 10px;
    text-align: left;
    height: 50px !important;
  }
  a {
    position: relative;
  }

  .person-image {
    height: 32px;
    width: 32px;
    position: absolute;
    top: -6px;
    left: 0px;
    background-size: 100% 100%;

    img {
      width: 100%;
    }

  }

  a span {
    display: block;
  }

  .person-name {
    font-weight: normal;
    display: block !important;
    margin-right: 65px;
    color: #82929F;
    .ellipsis;
  }

  .person-role {
    position: absolute;
    top: 0;
    right: 0;
  }

  .person-meta {
    padding-left: 42px;
    text-align: left;

  }

}

.project-dashboard-widget {
  border: 1px solid #d0d5d8;
  border-top-width: 3px;
  display: block;
  padding: 30px;

  height: 250px;
  position: relative;

  .title {
    font-size: 11px;
    color: #8a959e;
    font-weight: 600;
    text-transform: uppercase;
  }

  p {
    font-size: 16px;
  }

  h3 {
    font: 300 35px/52px "Open Sans", "open-sans", sans-serif;
    font-size: 24px;
    color: #323a45;
    line-height: 35px;
    margin: 0;
    text-transform: none;
  }
}

.project-meta-block {
  //    width:45%;
  //    margin:2.5%;
  //    float:left;
  //    padding:0 30px;
}

/** Activity feed **/

.activity-stream {
  padding: 0;
  margin: 0;

  ul {
    .clearfix;
    overflow: hidden;
  }

  li {
    list-style: none;
    margin: 20px 0;
    line-height: 18px;
    overflow: visible;
    position: relative;
    float: left;
    width: 100%;
    .clearfix;

    &:first-child {
      padding-top: 0;
      background-position: 0 3px;
    }
  }

  .activity-content {

    padding-left: 50px;

  }

  .activity-user {
    color: #666;
    display: inline-block;
  }

  .activity-timestamp {
    color: #999;
    font-size: 11px;
    margin-left: 5px;
    width: 100px;
  }

  .object-link {
    margin-top: 5px;
    min-height: 18px;
    line-height: 14px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0 0px;
  }

  .deleted-object {
    display: none;
    color: #aaa;
  }

  .activity-show-all {
    background-color: #f8f8f8;
    border: 1px solid #dfdfdf;
    padding: 10px;
    text-align: center;
    cursor: pointer;
  }

  .activity-meta {
    float: left;
    > div {
      display: inline-block;
    }
  }

  .activity-time {
    font-size: 12px;
    line-height: 32px;
    position: relative;
    top: -10px;
    display: none;
  }

  .icons {
    height: 32px;
    width: 32px;
    position: relative;
  }

  .type-icon {
    display: none;
  }

  .user-image {

    height: 25px;
    width: 25px;
    position: relative;
    top: 0;
    right: -4px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    img {
      width: 100%;
    }

  }

  .marker {

    left: 15px;
    display: block;
    position: absolute;

    height: 300px;
    background: #eee;
    width: 2px;
  }

  li:last-child .marker {
    display: none !important;
  }
}

.activity-task .type-icon {

  background: #A0B0BD;
}

.activity-invoice .type-icon {
  background: #DFF4F5;

  span {
    color: #22CEE6 !important;
  }
}

.activity-estimate .type-icon {
  background: #6FBC5F;
  //background: #4FC3F7
}

.activity-payment .type-icon {
  background: #F0E243;
}

.activity-message .type-icon {
  background: #3B7FCC;

}

.activity-file .type-icon {
  background: #A9CC9A;
}

.activity-project .type-icon {
  background: #ccc;
}

.activity-description {
  color: #334455;
}

.activity-title {
  color: #a2adb8;
  a {
    color: #a2adb8;
  }
}

.activity-file {
  .object-link {
    padding-left: 20px;
    background-image: url(../images/activity/file.png);
  }

  &.activity-deleted {
    padding-left: 0;
    background: none;
  }
}

.activity-message .object-link {
  padding: 10px 20px;
  background: #f7f7f7;
  border: 1px dashed #e0e0e0;
  border-radius: 5px;
  color: #666;
}

.activity-task {
  .activity-title {
    padding-left: 20px;
    background: url(../images/tasks/task-incomplete.png) no-repeat 0 5px;
  }

  &.activity-completed .activity-title {
    background: url(../images/tasks/task-complete.png) no-repeat 0 5px;

    a {
      text-decoration: line-through;
      color: #91a2b1;
    }
  }

  &.activity-deleted .activity-title {
    background: none;
    padding-left: 0;
  }
}

.activity-deleted {
  a.object-link {
    display: none;
  }

  .deleted-object {
    display: inline-block;
  }
}

#dashboard {
  height: 100%;
  margin: 0;

  h3 {
    font-weight: normal;
  }

  h4 {
    color: #9A9A9A;
    margin-top: 30px;
    margin-left: 18px;
  }

  #dashboard-right-column {
    width: 480px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fdfdfd;
    box-shadow: inset 3px 0 3px rgba(0, 0, 0, 0.02);
    border-left: 1px solid rgba(0, 0, 0, .08);
    padding: 20px 0 0 40px;
    position: absolute;
    top: 0;
    right: 0;
    //background: #FCFCFE;
  }

  #dashboard-left-column {
    width: 100%;
    height: 100%;
    padding: 0 480px 20px 0;
    float: left;

    overflow-y: auto;
    overflow-x: hidden;
  }

}

#dashboard-widgets {
  margin-top: 40px;
  margin-bottom: 50px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.04);
  font-size: 0;
}

.dashboard-widget {
  background: #fff;
  display: inline-block;
  width: 33.33%;
  margin: 0;
  text-align: center;

  padding: 40px;

  border-right: 1px solid rgba(0, 0, 0, 0.05);

  h5 {
    color: #888;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid #d0d0d0;
    //border-bottom:1px solid rgba(255, 255, 255, .3);
    display: inline-block;
  }
  h2 {
    letter-spacing: 1px;
    font-size: 40px;
    font-weight: 600;
    color: #111;
  }

  .currency-symbol {
    font-size: 16px;
    vertical-align: top;
    position: relative;
    top: 5px;
  }

  //&:first-child{
  //  background: #7B77C9;
  //
  //  h2, h5{
  //    color:#fff;
  //  }
  //}
  //
  //&:nth-child(2) {
  //  background: #F58786;
  //
  //  h2, h5 {
  //    color: #fff;
  //  }
  //}

}

.project-tile-list {
  margin: 0;
  list-style: none;

  .project-widget {
    float: left;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 30%;
    height: 220px;
    padding: 4.5% 4.5% 39px 4.5%;
    border: 1px solid #ccc;
    margin: 20px 4.5% 20px 0;
    position: relative;

    &:nth-child(3n) {
      margin-right: 0;
    }

    .project-title {
      margin-bottom: 20px;
      float: left;
      clear: both;
      width: 100%;
    }

    .bottom {

    }

    &:hover {
      background-color: #fffff6;
    }

    h3 {
      font-weight: normal;
      font-size: 18px;
      margin: 0;
      .ellipsis;
    }

    h6 {
      font-size: 11px;
      color: #999999;
      text-transform: uppercase;
    }

    .status {
      color: #fff;
      display: inline-block;
      font-weight: bold;
      margin-right: 5px;
      background-color: @on-time-color;
      border: 1px solid rgba(0, 0, 0, .2);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      position: relative;
      top: 4px;

    }

    &.at-risk .status {
      background-color: @at-risk-color;
    }

    &.behind-schedule .status, &.overdue .status {
      background-color: @overdue-color;
    }

    p {
      margin-bottom: 5px;
      font-size: 12px;
      color: #888;

      span {
        float: right;
      }
    }

    .progress-difference {
      float: right;
      font-weight: bold;
      letter-spacing: 1px;
    }

    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      color: #666;
      font-size: 12px;
      padding: 10px 20px;
      background-color: #fafafa;
      border-top: 1px solid #eee;
      width: 100%;

    }
  }
}

.project-line-item-list {
  margin: 20px 0 0 0;
  .clearfix;
  width: 100%;
  list-style: none;

  .project-widget {
    width: 100%;
    padding: 10px 10px 24px 10px;
    border-bottom: 1px solid #ddd;

    &:first-child {
      border-top: 1px solid #ddd;
    }

    &:nth-child(even) {
      background-color: #fcfcfc;
    }
  }

  h4 {
    display: inline-block;
    margin: 0 0 10px 0;
  }

  h4.client-name {
    color: #888;
    margin-left: 20px;
    font-size: 90%;
  }

  .progress-status {
    width: 70%;
    float: left;
    padding-right: 20px;
  }

  .due-date {
    width: 30%;
    float: left;
    text-align: right;
  }

  .project-title {
    margin-bottom: 0px;
  }

  .bottom {
    padding: 0;
    font-size: 12px;
  }

  .status {
    width: 8px;
    height: 8px;
    position: relative;
    top: 4px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
    background-color: @on-time-color;
  }

  &.at-risk .status {
    background-color: @at-risk-color;
  }

  &.behind-schedule .status, &.overdue .status {
    background-color: @overdue-color;
  }

  li {
    cursor: pointer;

    &:hover {
      background: @itemHoverBackgroundColor;
    }
  }
}

input.task-weight, .modal input.task-weight {
  width: 100px;
}

.loading-maximum-weight {
  display: inline-block;
  height: 16px;
  width: 16px;
  background: transparent url(../images/tasks/task-saving.gif) no-repeat center center;
}

.notification {
  text-align: left;
  width: 320px;
  position: fixed;
  right: 20px;
  display: inline-block;
  padding: 20px 20px 20px 20px !important;
  background: #fcfcfc;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .05);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 3px;
  display: none;
  bottom: 20px;

  &.showing {
    display: block;
  }

  background: #444;
  .button {
    colog: fff;
  }
  //box-shadow: 2px 3px 10px rgba(25, 184, 230, 0.33);
  color: #fff;

  .close {
    height: 12px;
    width: 12px;
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;

    &:after {
      content: 'x';
      height: 12px;
      width: 12px;
      display: block;
      position: absolute;
      top: -4px;
      left: 0;
      color: #999;
    }

    &:hover:after {
      color: #444;
    }
  }

  .button {
    border: none;
    background: transparent;
    font-size: 13px;
    float: right;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;

  }

}

.notification.error {
  border: 1px solid #eed3d7;
  background: #f2dede;
  color: #b94a48;
  padding: 5px 10px;
  border-radius: 3px;
}

.full-width-notification, .banner-notification {

  padding: 20px 40px;
  background-color: #fff;
  color: #2b6a94;
  border-bottom: 1px solid rgba(0, 0, 0, .1);

  margin-bottom: 60px;

  .notification-content {
    max-width: 800px;
    margin: 0 auto;
    color: #000;
  }

  .notification-buttons, .link-buttons {
    text-align: right;
    display: inline-block;
    float: right;
    margin-top: -3px;

    .main-action {
      background: #2d9ff3;
      color: #fff;
      box-shadow: none;
      border: none;

    }

  }
  .notification-buttons {

    .button {
      background: none;
      border: none;
      color: #2b6a94;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 13px;

      &.main-action:hover {
        background: @green-button-color;
        color: #fff;
      }
    }
  }
}

.banner-notification {
  width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

//new user form
#form-more {
  display: none;
  margin-top: 20px;
}

#add-client-user, #add-client, #edit-user {
  #hide-form-details {
    display: none;
  }

  &.showing-details {
    #hide-form-details {
      display: inline-block;
    }

    #show-form-details {
      display: none;
    }

    #form-more {
      display: block;
    }
  }
}

//global search
#global-search-page {

  padding:60px 40px;
  background:#fff;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  .solo-panel;

  .search-entities, #search-box {

  }
  .search-entity {
    margin: 0;
    padding: 40px;
    width: 100%;

  }

  #search-box-wrapper{
    input{
      width:100%;
      height:50px;
      line-height:50px;
      padding:0 20px;
      margin-bottom:40px;
      border-radius:4px;
      border:1px solid #d3d9e0;

    }
  }
  h6 {
    margin-bottom: 20px;
    font-size: 22px;
    color:@dark-blue;
  }

  #search-message-results {
    .list.condensed li > div {
      height: auto;

    }

    .list.condensed li {
      height: auto;
      line-height: 1.5;
      padding: 10px 0;
      .clearfix;
    }
  }
  .list li > div, .list-main-header > div {
    .ellipsis;
  }

  .search-task-list {

    .task-name {
      width: 50%;
    }

    .task-project-name {
      width: 30%;
    }

    .task-status {
      width: 10%;
    }

    .task-due-date {
      width: 10%;
    }
  }

  .project-list {
    .project-name {
      width: 80%;
    }

    .project-due-date {
      width: 10%;
    }

    .project-status {
      width: 10%;
    }
  }

  .file-list {
    .file-name {
      width: 50%;
    }

    .file-type {
      width: 10%;
    }

    .file-project-name {
      width: 40%;
    }
  }

  .message-list {
    p:first-child {
      margin-top: 5px;
    }
  }

  #search-filters {
    float: right;
    margin-right: 10px;

    .clearfix;
  }

  @media(max-width:1024px){
    padding-right:20px;
    padding-left:20px;
    .search-entity{
      padding:40px 0;
    }
  }
}

.no-search-results {
  float: left;
  background: #fafafa;
  font-style: italic;
  font-size: 16px;
  text-align: center;
  padding: 20px;
  width: 100%;
  margin-top: 10px;
}

#forgot-password {
  height: 100%;
  background: #f7f8fa;
  .clearfix;

  #temp-password-message {
    display: none;
  }

  form, #temp-password-message {
    width: 400px;
    padding: 40px;
    margin: 100px auto 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.07);
    .clearfix;
  }

  &.submitted {
    #temp-password-message {
      display: block;
    }

    form {
      display: none;
    }
  }
  p {
    margin-bottom: 0;
  }

  input[type=text] {
    .login-window .input;
    padding-left: 20px;
    margin: 20px auto;
    float: left;
  }

  h4 {
    margin-bottom: 20px;
  }

  .error {
    .modal

    .error;
  }

}

#project-form {
  .inline {
    width: 176px;
  }
}

.panel-loading, .panel-no-selection {
  text-align: center;
}

#panel-one {
  position: relative;

  .notification {
    position: absolute;

    left: 50%;
    margin-left: -60px;
    width: 120px;
    text-align: center;
    background-color: #fcfcfc;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #ddd;
    .border-radius(0 0 4px 4px);
  }
}









#admin-settings {
  .solo-panel;
  max-width:1200px;
  margin-top:40px;
  padding-top:40px;


  h4 {
    margin-bottom: 10px;
  }


  .edit-setting {
    font-size: 12px;
    margin-left: 20px;
    color: #22f;
    cursor: pointer;
    display: none;

  }

  li:hover .edit-setting {
    display: inline;
  }
}

#running-timer-space {
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, .07);
  background: #49D278;
  padding: 0 13%;
}

.running-timer {
  width: 100%;
  float: left;

  cursor: pointer;
  color: #fff;
  height: 40px;
  line-height: 40px;

  .timer-task {
    .ellipsis;
    padding: 0 40px 0 0;
    max-width: 70%;
  }

  .timer-elapsed {
    padding-right: 10px;
  }

  .timer-stop {
    height: 15px;
    width: 15px;
    background: rgba(255, 255, 255, .8);
    position: relative;
    top: 12px;

    &:hover {
      background: rgba(255, 255, 255, 1);

    }

  }
}

.running-timer-inner {
  float: left;
  position: relative;
  width: 100%;

  > div {
    vertical-align: top;
    display: inline-block; //        padding:9px 10px;
    line-height: 40px;
  }
}

.panel-filter-wrapper {
  display: inline-block;
}

.panel-filter {
  display: inline-block;
  cursor: pointer;
  position: relative;
  color: #999;

  .panel-selected-filter {
    padding: 2px 19px 2px 10px;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
  }

  &:hover, &.active {
    color: #444;

    .panel-selected-filter {
      border: 1px solid #ccc;
      background: #fff;

    }

    .caret {
      display: inline-block;
    }
  }

  &.active {

    .panel-selected-filter {
      border-bottom-width: 0;
    }
    ul {
      display: block;
    }
  }

  ul {
    list-style: none;
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    top: 24px;
    left: 0;
    margin: 0;
    min-width: 100%;

    z-index: 0;
    background: #fff;

    font-size: 15px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);

  }

  li {
    padding: 5px 15px;
    white-space: nowrap;
    color: #333;

    &:first-child {
      border-top: none;
    }

    &:hover {
      background-color: #f2f4f8 !important;
      color: #181a1c;
    }

    &.selected {
      font-weight: bold;
    }
  }

  .caret {
    display: none;
    position: absolute;
    right: 5px;
    top: 9px;
  }
}

.panel-sort-wrapper {
  display: inline-block;

  .ascending {
    .arrow-up {
      border-bottom-color: #666;
    }
  }

  .descending {
    .arrow-down {
      border-top-color: #666;
    }
  }

}

.panel-sort {
  cursor: pointer;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid #aaa;
  margin-bottom: 2px;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #aaa;
}

@media all and (max-width: 1500px) {
  .panel-filter .panel-selected-filter {
    padding: 2px 12px 2px 5px;

    .caret {
      border-top: 3px solid #000000;
      border-right: 3px solid transparent;
      border-left: 3px solid transparent;
      right: 3px;
      top: 11px;
    }
  }

  .selected-filter-name {
    font-size: 80%;
  }

  .panel-info .panel-actions-wrapper .panel-action {
    min-width: 34px;
  }

  .panel-info h3 {
    font-size: 18px;
  }
}

#app-loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #2381ef;
  font-size: 30px;
  text-align: center;

  z-index: 999999;

  section {

    vertical-align: middle;
    text-align: center;
    margin: 100px auto;
  }
}

.loader {

}

/*	$Loader Quadrant
	========================================================================== */

.loader-quart {
  border-radius: 65px;
  border: 6px solid rgba(35, 129, 239, 0.25);
  display: inline-block;
  position: relative;
  width: 130px;
  height: 130px;
  vertical-align: middle;
}

.loader-quart:after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
  border-radius: 65px;
  border: 6px solid rgba(35, 129, 239, .25);
  border-top-color: rgba(35, 129, 239, 1);
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.loader-text {
  font-size: 18px;
  position: relative;
  top: 34px;
}

.smart-menu {

  ul {
    display: inline-block;
  }

  li {
    list-style: none;
    cursor: pointer;
  }

  .smart-menu-hover {
    &:hover {
      color: @activeTextColor1;
    }
  }

  .smart-menu-items {
    li {
      display: inline-block;
      padding: 10px 0;
      margin-right: 15px;
      line-height: 24px;
      .smart-menu-hover;

      &.selected, &:hover {
        color: #595959;
      }

      &.selected {

        font-weight: bold;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #f5f5f5;
        padding: 10px 12px;
      }
    }
  }

  .more {
    display: inline-block;
    position: relative;
    line-height: 24px;
    cursor: pointer;
    padding: 0 20px; //        .smart-menu-hover;
  }

  .sidebar-icon {
    font-size: 12px;
  }

  .smart-menu-overflow {
    display: none;

    &.active {
      display: block;
    }

    list-style: none;
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    top: 30px;
    left: 0;
    margin: 0;
    z-index: 0;
    background: #fff;
    font-size: 15px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 100px;

    ul {

    }

    li {
      padding: 5px 15px;
      white-space: nowrap;
      color: #333;

      &:first-child {
        border-top: none;
      }

      &:hover {
        background-color: #f2f4f8 !important;
        color: #181a1c;
      }

      &.selected {
        font-weight: bold;
      }
    }

    li.has-button {
      padding: 0;
      .button {
        display: block;
        padding: 10px 15px;
        margin: 0 !important;
      }

      .button.danger:hover {
        background: #ff4f59;
        color: #fff;
      }
    }
  }

  .more .button {
    border: none !important;
    box-shadow: none !important;
    float: none;
    padding: 0;
    background: none;
  }

  .smart-menu-menu-text, .menu-icon {
    display: none;
  }

  &.showing-none {
    .smart-menu-menu-text, .menu-icon {
      display: inline;
    }
    .smart-menu-more-text, .more-icon {
      display: none;
    }
  }
}

.background-icon(@icon-character, @top:1px) {

  &:before {
    font-family: 'themify';
    content: @icon-character;
    position: absolute;
    top: @top;
    left: 9px;
    z-index: 9999;
  }

}

.dropdown-button {
  display: inline-block;
  position: relative;

  &.loading .main-button {
    padding-right: 30px;
    background-image: url(../images/button-loader.gif);
    background-position: 92% center;
    background-repeat: no-repeat;
  }

  &.show-indicator {
    .main-button {
      .background-icon("\e64b");
    }
  }

  .has-icon {
    padding-left: 35px;

    &:before {
      top: 10px;
    }
  }
}

.empty-task-list {
  text-align: center;
  margin-top: 100px;

  h3 {
    color: @darker-text-color;
    max-width: 500px;
    margin: 40px auto;
    line-height: 1.4;

  }
}

.empty-list #card-view {
  height: auto;
  margin: 0 auto;
  float: none;

  #card-view-incomplete {

    height: auto;
  }

}

#kanban-view {
  .background-icon("\e712", 10px);
}

#list-view {
  .background-icon("\e667", 10px);
}

.dropdown-button-dropdown {
  display: none;

  &.active {
    display: block;
    z-index: 999999;
  }

  .button {
    margin-right: 0;
  }

  list-style: none;
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  top: 100%;
  right: 0;
  margin: 0;
  z-index: 0;
  background: #fff;
  font-size: 15px;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-width: 100px;

  ul {

  }

  li {
    padding: 10px 15px;
    white-space: nowrap;
    color: #333;
    line-height: 24px;
    cursor: pointer;
    position: relative;

    &:first-child {
      border-top: none;
    }

    &:hover {
      background-color: #f2f4f8;
      color: #181a1c;
    }

    &.selected {
      font-weight: bold;
    }

    &.danger {
      background: transparent;
      color: #333;
      box-shadow: none;
      border: none;

      &:hover {
        background: #ff4f59;
        color: #fff;
      }
    }
  }

}

.settings-section {
  //background: #fdfdfd;
  padding-bottom:60px;
  color:@darker-text-color;



  p {
    max-width: 65rem;
    margin-bottom: 20px;
  }

  h4{
    color:@darker-text-color;
  }

  strong{
    color:@dark-blue;

  }
}

.setting-section-header {
  text-transform: uppercase;
  font-size: 90%;
  color: #777;
}

.setting-section-values {
  margin-bottom: 30px;
  list-style: none;
}

.admin-section {
  display: none;
  padding: 20px 0;

  &.active {
    display: block;
  }


  form {
    margin-right: 5%;
    margin-top: 20px;
  }

  .field {
    margin-bottom: 20px;
  }

  .error {
    display: block;
    clear: both;
    font-size: 11px;
    color: #ff0000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  h5 {
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 5px;
  }
}

#admin-feedback {
  > div {
    float: left;
    width: 100%;
  }
}

#social-shares {
  border-left: 1px solid #dadada;
  padding-left: 5%;

  a {
    padding: 8px 20px;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    font-size: 14px;
    margin: 10px 0;
    text-decoration: none;
  }

  .share-icon {
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 1px;
  }

  #facebook-button {
    background-color: #4e69a2;

    &:hover {
      background-color: #6391dd;
    }
  }

  #twitter-button {
    background: #55acee;

    &:hover {
      background: #4b97cf;
    }
  }

  #linkedin-button {
    color: #4875b4;
    background-color: #eaeaea;

    &:hover {
      background-color: #c6c6c6;
    }
  }

  #google-button {
    background-color: #dd4b39;
    color: #fff;

    &:hover {
      background-color: #cd4937;
    }
  }
}

#admin-feedback {
  p {
    width: 70%;
    margin-right: 30%;
  }

  form{
    width:60%;
    float:left;
    margin-bottom:100px;

    input, textarea, label{
      display:block;
      width:100%;
    }
  }


  #social-shares {
    width: 35%;
    float: left;
  }
}

.person-info {
  width: 140px;
  height: 167px;
  float: left;
  margin-right: 20px;
  text-align: center;
  list-style: none;
  color: #fff;
  padding: 20px;
  cursor: pointer;
  border-radius: 4px;

  a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    position: relative;

    span {
      display: block;
    }
  }

  &:hover {
    background: @itemHoverBackgroundColor;
    .person-name, .person-role {
      color: #328ff1;
    }
  }

  .person-image {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 40px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    background-position: center center;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  .person-name {
    color: #444;
    font-weight: bold;
    .ellipsis;
  }

  .person-role {
    color: #aaa;
    text-transform: uppercase;
    font-size: 12px;
  }

  .remove-user {
    position: absolute;
    text-align: center;
    width: 80px;
    left: 50%;
    margin-left: -40px;
    background: #f2dede;
    color: #a94442;
    border-radius: 4px;
    border: 1px solid #ebccd1;
    bottom: -30px;
    display: none;

    &:hover {
      background-color: #eacbce;
      border-color: #eba4a4;
      color: #943c3a;
    }

  }

  &:hover .remove-user {
    display: block;

  }
}

#add-person-to-project {
  width: 378px;
}

#choose-new-user-type {
  width: 478px;

  .new-user-type {
    position: relative;
    border: 1px solid transparent;
    padding: 20px;
    cursor: pointer;

    &:hover {
      background: @itemHoverBackgroundColor; //            color:@itemHoverTextColor;

      .icon {
        color: @itemHoverTextColor;
        border-color: @itemHoverTextColor;
      }
    }
  }

  h5 {
    font-weight: bold;
  }

  .icon {
    font-size: 17px;
    padding: 10px;
    border: 1px solid #aaa;
    color: #aaa;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 20px;
  }

  .user-type-description {
    padding-left: 50px;

  }
}

form#add-client, #add-user-to-project-step-one {
  width: 378px;
}

#add-user-to-project-step-one {
  width: 378px;

  h5 {
    font-weight: bold;
  }

  > p {
    margin-top: 20px;
    float: left;
    width: 100%;
    clear: both;
  }

  .new-user-type {
    position: relative;
    border: 1px solid transparent;
    padding: 20px;
    cursor: pointer;

    &:hover {
      background: @itemHoverBackgroundColor; //            color:@itemHoverTextColor;

      .icon {
        color: @itemHoverTextColor;
        border-color: @itemHoverTextColor;
      }
    }
  }

  h5 {
    font-weight: bold;
  }

  .icon {
    font-size: 17px;
    padding: 10px;
    border: 1px solid #aaa;
    color: #aaa;
    border-radius: 25px;
    position: absolute;
    top: 30px;
    left: 20px; //        color:@itemHoverTextColor2;
    //        border-color:@itemHoverTextColor2;
  }

  .user-type-description {
    padding-left: 50px;

  }

}

.user-quick-access-panel {

  width: 300px;
  height: 100%;

  ul {
    list-style: none;
    margin-top: 20px;

  }

  li {
    margin-bottom: 10px;
  }

  .icon {
    margin-right: 10px;
  }

  .quick-access-top {
    background: #fff;
    text-align: center;

    border-bottom: 1px solid @border-color;
  }

  .quick-access-top, .quick-access-content {
    padding: 20px 40px;;
  }

  .user-image {
    display: inline-block;
  }

  border-left: 1px solid @border-color;

  #quick-access-change-photo {
    padding: 0;
    display: inline;
    position: relative;
    left: -3px;

    .link;
  }

}

.panel-categories {
  margin-top: 5px;
  padding-left: 18px;

  li, .more {
    color: #A0A1A2;

    &:hover {
      color: #6d6e6f;
    }
  }

  li {

    &:last-child {
      border-right: none;
    }

  }
}

.inline-popup {
  font-size: 15px;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-width: 100px;
  min-height: 50px;
  z-index: 999;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;

  &:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    top: 100%;
    left: 50%;
    margin-left: -10px;
  }

  &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 11px;
    border-style: solid;
    border-color: #ccc transparent transparent transparent;
    top: 100%;
    left: 50%;
    margin-left: -11px;

  }

  &.bottom {
    &:before {
      top: 0%;
      margin-top: -22px;
      border-color: transparent transparent #ccc transparent;
    }

    &:after {
      top: 0%;
      margin-top: -20px;
      border-color: transparent transparent #fff transparent;
    }
  }
}

.inline-popup {
  padding: 10px;
  opacity: 0;

  &.showing {
    opacity: 1;
  }

  input, select, textarea {
    padding: 0px 6px;
    display: block;
    margin: 0 0 7px 0;
  }

  .select2-container {
    margin-bottom: 10px;
  }

  input[type=text], input[type=number], input[type="date"], input[type=password], select {
    height: 12px; //        line-height:32px;
  }

  select {
    width: 100%;
  }

  input[type=submit], .button {
    padding: 2px 5px !important;
    font-size: 12px;
    background: #444;
    border: none;
    text-shadow: none;
    border-radius: 0;
    color: #fff;
    float: right;
  }

  .cancel {
    float: left;
    background: #ccc;
    color: #333;
  }

}

#assign-tasks-form {
  width: 200px;

  select, .select2 {
    width: 100%;
  }
}

#start-timer-popup {
  width: 160px;

}

#new-task-form {


  .clickable {
    display: block;
    color: @activeTextColor1;
    margin-bottom: 15px;

    &:hover {
      text-decoration: underline;
    }
  }
}

#panel-two .entity-list {
  width: 100%;
}

@media (max-width: 1024px) {

  body {
    font-size: 15px;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .inner-content.content > div {
    padding-right: 0px;
    padding-left: 0px;

  }

  .inner-content.content > .item-details {
    padding-right: 20px;
    padding-left: 20px;
  }

  #mobile-menu-button {
    display: block;
    position: absolute;
    top: 1px;
    left: 0px;
    z-index: 9999;
    cursor: pointer;
    padding: 10px;
    font-size: 20px;
    color: #ccc;
    transition: left .2s ease;

    &:hover {
      color: @activeTextColor1;
    }
  }

  .mobile-menu-showing {
    #sidebar, #slide-out-panel-wrapper {
      left: 0px;
      z-index: 2;
      //box-shadow:0 0 10px rgba(0, 0, 0, .25);
    }

    #sidebar {
      //background:#fff;
      border-right: 1px solid rgba(0, 0, 0, .25);
    }
    .window-outer {
      padding-left: 60px;
    }

    #mobile-menu-button {
      left: 203px;
    }

    #mobile-overlay {
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      //background: linear-gradient(to right, rgba(188, 198, 206, .5) 0%,rgba(98, 112, 120, .6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      background: rgba(255, 255, 255, .15);

      z-index: 1;
    }
  }

  .panel-info {
    padding-top: 0;
    height: 48px;

    h3 {
      line-height: 48px;
      font-size: 15px;

    }
  }

  .panel-categories {
    margin-top: 0;
    line-height: 48px;
    border: none;
  }

  #sidebar {
    left: -200px;
    transition: left .2s ease;
  }

  .slide-out-panel {
    margin-left: -800px;
  }

  .entity-list {
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .entity-list-header {
    padding: 11px 15px 11px 50px;

    h4 {
      line-height: 28px;
    }
  }

  .full .window-outer {
    padding-left: 0px;
    min-width: 200px;
  }

  #current-user {
    text-align: center;
    float: none;

    .user-image-wrapper {
      display: inline;
      margin: 0;
      float: none;
    }

    .user-meta {
      display: none;
    }
  }

  #global-search-space {
    display: none;
  }

  ul#sidebar-menu-items {
    margin-top: 10px !important;
  }

  .project-tile-list .project-widget {
    width: 47.5%;

    &:nth-child(3n) {
      margin-right: 4.5%;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

  }
}

@media (max-width: 800px) {
  .unfloat-on-mobile {
    float: left !important;
    width: 100% !important;

  }



  .task-list li {
    padding-right: 150px !important;

    .task-assigned {
      right: 5px !important;
    }

    .task-actions, .task-meta {
      display: none !important;
    }
  }

  .client-task-list .task-details {
    padding-right: 150px !important;

    .task-assigned {
      right: 5px !important;
    }
  }

  .file-list {
    .file-extension {
      width: 20%;
    }
    .file-title {
      width: 60%;
    }

    .file-type {
      width: 20%;
    }

    .file-uploader-name {
      width: 0%;
      display: none;
    }

    .file-create-date {
      width: 0%;
      display: none;
    }
  }



  #tasks-list {
    .task-due-date {
      display: none !important;
    }
  }

  #dashboard-project-list {
    border-right: none !important;
  }

  #project-details {
    #top-details {
      height: auto;

      div {
        padding-top: 10px;
        width: 50% !important;
        text-align: left;
      }
      h5 {
        font-size: 14px;
        margin-bottom: 0;
      }

      h3 {
        font-size: 16px !important;
      }
    }
  }
}

@media (max-width: 500px) {

  .full .window-outer {
    padding-left: 0px;
    min-width: 200px;
  }

  .user-details {
    width: auto;
  }

  .panel .inner-content > div {
    margin-left: 20px
  }

  .panel-info {
    .panel-actions-wrapper {
      right: 0;
    }
    h3 {
      padding-right: 0px;
      width: 100%;
      .ellipsis;
    }

    .panel-left {
      width: 100%;
    }
  }

  .smart-menu .more {
    padding: 0;
  }

  .panel-categories {
    padding-left: 0;
  }

  .user-quick-access-panel {
    width: 200px;
  }

  .quick-access-content {
    padding: 20px !important;
  }

  //entity list
  .entity-list {
    width: 200px;
  }

  .entity-list-header {
    padding-left: 40px;
  }

  .entity-list-title {
    font-size: 16px;
  }

  .entity-actions {
    display: none !important;
  }

  //project stuff
  #discuss-project-button .discuss-button-text {
    display: none;
  }

  #project-details #top-details {
    margin-right: 0;
  }

  #project-details #top-details > div {
    padding-right: 0px;
  }

  #project-calendar {
    display: none;
  }

  .new-entity {
    display: none;
  }





  #attach-files-button-wrapper, .add-file-button {
    display: none !important;
  }

  //file list
  .file-list span {
    font-size: 10px;
    padding: 2px 5px;
  }

  #file-view-type {
    display: none;
  }

  .button {
    font-size: 12px;
  }

  //task list
  .client-task-list {
    .task-due-date {
      display: none !important;
    }
  }



  #dashboard-project-list {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-projects {
    padding-right: 20px !important;
  }

  .project-tile-list .project-widget {
    width: 100%;
    height: 120px;
  }

  //modal
  .modal {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
  }

  form {
    max-width: inherit !important;
  }

  #reporting-tab {
    display: none;
  }

  .client-details .user-email {
    display: none;
    width: 0;
  }

  .client-details .user-name {
    width: 70% !important;
    .ellipsis;
  }

  .client-details .user-image-container {
    width: 30% !important;
  }
}

#make-recurring-form {
  max-width: 800px;
  margin: 0 auto;
  paddding: 40px;

  .inline {
    width: 45%;
    margin-right: 9%;

    &:last-child {
      margin-right: 0;
    }
  }

  #custom-frequency {
    display: none;
  }

  #recurrence-frequency[data-selection=custom] {
    #custom-frequency {
      display: block;
    }
  }

}

#link-body {
  margin: 0 auto;
  background: #F4F6F9;
  height: 100%;
  overflow: auto;
}

#link-view {
  height: 100%;
}

#link-body {

}

//top progress bar
/* Make clicks pass-through */
#top-progress-bar {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  &.showing {
    opacity: 1;
    visibility: visible;
  }
}

#top-progress-bar .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
  transition: all 200ms ease;
}

/* Fancy blur effect */
#top-progress-bar .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#top-progress-bar .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#top-progress-bar .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: top-progress-bar-spinner 400ms linear infinite;
  animation: top-progress-bar-spinner 400ms linear infinite;
}

.top-progress-bar-custom-parent {
  overflow: hidden;
  position: relative;
}

.top-progress-bar-custom-parent #top-progress-bar .spinner,
.top-progress-bar-custom-parent #top-progress-bar .bar {
  position: absolute;
}

@-webkit-keyframes top-progress-bar-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes top-progress-bar-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#login-screen {
  height: 100%;
  width: 100%;
  float: left;
}

#login-info, #login-form {
  float: left;
  height: 100%;
}

#login-info {
  width: 60%;
  background: #26262E;

  #login-logo {
    background: url(../images/duet-128.jpg) center center;
    background-size: 40px;
    border-radius: 50%;
    overflow: hidden;
    height: 40px;
    width: 40px;
    position: absolute;
    left: 0;
    top: 30px;
  }
  .welcome-text {
    width: 50%;
    max-width: 500px;
    margin-left: 20%;
    display: table;
    height: 100%;
    position: relative;
  }

  .welcome-text-inner {
    display: table-cell;
    vertical-align: middle;
  }

  h3 {
    color: #fff;
    margin-bottom: 2.5rem;
  }

  p {
    color: #aaa;
    line-height: 1.5;
  }

  .powered-by {
    position: absolute;
    left: 0;
    bottom: 20px;
    background: rgba(0, 0, 0, .4);
    color: rgba(255, 255, 255, .8);
    padding: 4px 10px;
    border-radius: 4px;
  }
}

.login-header, .login-footer {
  .content {
    max-width: 800px;
    margin: 0 auto;
  }

  h3 {
    font-weight: 700;
  }

  color: #E2E9F0;

  p {
    color: #ccc;
  }

}

.login-header {
  height: 200px;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding-top: 40px;
}

.login-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  text-align: right;
  width: 100%;
  padding: 20px 60px;
  border-top: 1px solid rgba(43, 50, 57, 0.15);
  background: @dark-blue;
  a {
    color: rgba(255, 255, 255, 0.65);

    &:hover {
      color: #fff
    }
  }
}

#login-form {

  width: 100%;

  background: #F1F5F9;

  background-size: cover;
  position: relative;
  display: table;

  padding: 200px 0 100px 0;

  #form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: rgba(38, 38, 46, .8);
    height: 100%;
    width: 100%;
    display: none;
  }

  .form-content {
    position: relative;
    z-index: 1;
    //display: table-cell;
    padding: 40px 40px 75px 40px;
    margin: 0 auto;
    width: 400px;
    .solo-panel;

    //vertical-align: middle;
  }

}

.login-title {
  margin: 0 0 10px 0;
  color: @dark-blue;
  font-weight: bold;

  text-align: center;
}

.login-subtitle {
  padding: 0;
  margin: 0px 5px 15px 0;
  font-size: 23px;
  line-height: 29px;
  text-align: center;
}

.login-window {
  max-width: 400px;

  margin: 0 auto 0 auto;
  position: relative;

  h3, p {
    font-family: @font-family;
    font-weight: normal;
    text-align: center;
    z-index: 0;
  }

  p {
    display: none;
    margin: 10px 0 20px 0;
    color: #81898f !important;
    font-size: 15px;
    margin: 0;
  }

  form {
    position: relative;
    height: 180px;
    margin: 0 auto;

    > div {
      position: relative;
    }
  }

  .login-fields {
    margin-bottom: 12px;

    > div {
      padding: 10px 0;
      position: relative;
    }
  }

  label {
    position: absolute;
    left: 16px;
    top: 27px;
    opacity: .4;
    transition: opacity linear .2s;
    color: #000;
    display: none;
  }

  [for=username] {
    background-position: -168px 0;
  }

  [for=password] {
    background-position: -287px -24px;
  }

  input[type=text], input[type=password], .input {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    box-shadow: inset 0px 0px 0px 1px rgba(43, 50, 57, 0.21), inset 0 5px 3px -2px rgba(43, 50, 57, 0.04), 0 0 4px 1px rgba(69, 140, 207, 0);
    -webkit-appearance: none;
    border: 0;
    display: inline-block;
    color: #4e5b68;
    padding: 10px 10px;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    -webkit-transition: box-shadow 100ms ease;
    transition: box-shadow 100ms ease;

    padding: 15px 13px;
    font-size: 17px;
    line-height: 22px;

    &:focus {

      outline: none !important;
    }
  }

  input:focus + label {
    opacity: .6;
  }

  button[type=submit] {
    border: 0;
    cursor: pointer;
    display: inline-block;

    background-color: #798BA3;
    border-radius: 3px;
    color: #fff !important;

    text-decoration: none;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.05);
    -webkit-font-smoothing: antialiased;
    -webkit-transition: background-color 100ms ease;
    transition: background-color 100ms ease;

    padding: 15px 18px !important;
    font-size: 18px;
    line-height: 21px;

    span {
      position: relative;
      top: 2px;
    }
    &:focus {
      outline: none;
    }

  }

  .forgot-password {
    display: inline-block;
    font-size: 15px;
    color: rgba(43, 50, 57, 0.45);
    margin: 5px 0;
    text-decoration: none;
    border-bottom: 0px solid #4e5b68;
    -webkit-transition: color 100ms ease, border-bottom 100ms ease;
    transition: color 100ms ease, border-bottom 100ms ease;
    vertical-align: bottom;
    float: right;

  }

  .error-message {
    text-align: center;
    font-size: inherit;
  }

}

[data-type=cards] {
  height: 100%;
  margin-bottom: 0 !important;
  overflow-x: auto;
}

#tasks-list-wrapper {
  padding-top: 20px;
  max-width: 100% !important;
  padding-left: 10%;

  @media(max-width:1024px){
    padding:20px 4%;
  }
}

#card-view-incomplete {
  float: left;
  height: 100%;

}

#card-view {
  &[data-filter=all] {
    #card-view-complete {
      padding: 0 15px;
    }

  }
}

#card-view-complete {

  h5 {
    color: @dark-blue;
    margin: 0px 0 10px 0;
  }

  padding-bottom: 5px;
  margin-bottom: 30px;
  display: block;

}

#card-view {

  height: 100%;
  float: left;

  .card-column {
    width: 300px;
    height: 100%;
    float: left;

    //border:1px solid #e8e8e8;
    //border-radius:4px;
    //margin:0 10px;
    //background:#fcfcfc;
  }

  .card-column-header {
    padding: 10px 0;
    font-size: 18px;
    font-weight: normal;
    color: #000;
    margin: 0 15px;
    .ellipsis;

    padding: 15px 20px;
    color: #fff;
    background-color: #A0B0C6;
    background-color: #56A8FB;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  }

  //.card-column:nth-child(2) .card-column-header{
  //  background-color:#8F7EE3;
  //}
  //
  //.card-column:nth-child(3) .card-column-header{
  //  background-color:#49D57A;
  //}
  //
  //.card-column:nth-child(4) .card-column-header{
  //  background-color:#49D57A;
  //}

  .new-section .card-column-header {
    display: none;
  }

  .ui-state-hover.no-cards .cards:after, .card-placeholder, .column-placeholder {
    content: ' ';
    height: 60px;
    background: #EEF0F5;
    margin: 15px;
    display: block;
    border: dashed 2px rgba(0, 0, 0, .2);
    position: relative;
    overflow: hidden;
  }

  .column-placeholder {
    height: 90%;
    width: 270px;
    float: left;
  }

  .card {
    padding: 20px 20px 20px 30px;
    margin: 15px;
    display: block;
    cursor: pointer;
    background: #fff;
    color: #3B4859;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    position: relative;
    overflow: hidden;

    &.has-meta {
      padding-bottom: 60px;
    }

    &:after {
      content: ' ';
      position: absolute;
      height: 100%;
      width: 3px;
      /* border-radius: 6px; */
      top: 0;
      left: 0;
    }

    &.at-risk:after {
      background-color: @at-risk-color;
    }

    &.overdue:after {
      background-color: @overdue-color;
    }

    &.complete {

      .is-task-completed {
        .completed-task-checkbox;
      }

      .task-details {
        text-decoration: line-through;
        color: #888;
      }
    }

    .task-status-indicator {

      top: 22px;
      left: 15px;
    }

    .user-image {
      height: 24px;
      width: 24px;
      position: absolute;
      top: 17px;
      right: 12px;
      display: none;

    }

    .task-details {
      overflow: hidden;
      margin-right: 25px;
      margin-left: 12px;
    }

  }

  .card-meta {
    text-align: left;
    padding: 0 18px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    border-top: 1px solid #edf1f8;
    color: #606F82;
    font-size: 14px;

    .has-notes, .has-files {
      margin-left: 15px;
      line-height: 40px;
      float: right;
      font-size: 18px;
      color: @bright-blue;
    }

    .has-notes {
      font-size: 19px;
    }

    i {
      font-size: 18px;
      margin-right: 10px;
      vertical-align: middle;
      color: @on-time-color;
    }
  }

  .overdue .card-meta i {
    color: @overdue-color;
  }

  .at-risk .card-meta i {
    color: @at-risk-color;
  }
  .ui-sortable-helper {
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
  }

  .card-column.ui-sortable-helper {
    border: 1px solid rgba(0, 0, 0, .15);
  }

  .task-status-indicators;

  .new-card, .new-section {
    margin: 15px;

    input {

      background-color: #fff;
      padding: 9px 13px;
      color: #a6a6a6;
      border-radius: 3px;
      border: 1px solid #D4DDEC;
      width: 100%;
      height: 50px;
      line-height: 50px;

      &:focus {
        border: 1px solid #aaa;
        outline: none;
      }
    }
  }

  .new-section {
    width: 259px;
    float: left;
    margin-top: 0;
  }

  .cards {

    overflow-y: auto;

  }

  #complete-tasks-list .is-task-completed {
    .completed-task-checkbox;
  }

}





.dashboard-calendar, #dashboard-upcoming-events-list {
  width: 450px;
  display: inline-block;
  vertical-align: top;
}



.dashboard-calendar {
  .fc th, .fc td {
    border: none;
  }

  .fc-basic-view .fc-body .fc-row {
    min-height: 2em;
  }

  .fc td.fc-today {
    border: none;
  }

  .fc-day-number {
    line-height: 40px;
    font-size: 16px;
    text-align: center !important;
    position: relative;

    &.fc-today {
      color:#fff;
      font-weight:bold;
      &:before {
        content: ' ';
        height: 30px;
        width: 30px;

        background:#54DC83;

        border-radius: 50%;
        position: Absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
        z-index: -1;
      }
    }

    &.has-event {
      font-weight: bold;
      color: #fff;

      &:before {
        content: ' ';
        height: 30px;
        width: 30px;

        background:#85CFFE;

        border-radius: 50%;
        position: Absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
        z-index: -1;
      }

      &.fc-today {
        color: #fff;
        &:before {
          background:#54DC83;
          border: 2px solid #fff;
          margin-top: -17px;
          margin-left: -17px;
        }
      }
    }
  }

  .fc-day.fc-today {
    background: none !important;
  }
  .fc-day-header {
    text-transform: uppercase;
    font-weight: normal;
    color: #111;
  }
}

#calendar-months {
  font-size: 11px;
  white-space: nowrap;
  padding: 0 30px;
  text-transform: uppercase;
  > div {
    display: inline-block;
    width: 8%;
    color: #888;
    .ellipsis;

    &.current {
      font-weight: bold;
    }
  }
}

.details-info {
  display: block;
  margin-bottom: 10px;
  color: #777;
}



.stopped {
  font-size: 12px;
  background: #888;
  color: #fff;
  border-radius: 3px;
  margin-left: 20px;
  padding: 5px 10px;

}

.nav-tabs {

  li {
    display: inline-block;
    list-style: none;
  }
  a {
    display: inline-block;
    background-color: transparent;
    color: #5b666d;

    font-weight: 400;
    padding: 5px 0px;
    margin-right: 30px;
    text-decoration: none;
  }

  .active a {
    background: none;
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: #3b67b3 0px 2px 0px 0px;
    color: #3b67b3;
  }
}

button.link {
  text-decoration: underline;
  background: none;
  border: none;
}

button.entity-link {
  //background:rgba(0, 0, 0,.4);
  border: none;
  background: transparent;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  background: url(../images/link.svg) no-repeat center center;
  background-size: 15px;
  opacity: .3;
  transition: opacity .4s ease;

  &:hover {
    opacity: .6;
  }
}

.entity-link-url {
  word-wrap: break-word;
  color: #6179a9;
}

#more-button-wrapper {
  margin: 30px 0 0 0;
}

#more-tasks {
  display: none;

  &.showing {
    display: block;
  }
}

#agenda-tasks-filter-title {
  display: none;
}

#agenda-tasks {
  max-width: 800px;
  margin: 0 auto;
  position: relative;

  &.filtered {
    h4 {
      display: none;
    }

    li {
      display: none;

      &.filter-match {
        display: block;
        border:none;
      }
    }

    #agenda-tasks-filter-title {
      display: block;
      position: relative;
      background:#E2E9F0;
      color:@dark-blue;

      .close {
        cursor: pointer;
        position: absolute;
        top: 14px;
        right: 10px;
      }
    }
  }

  .no-matches{

      display:none;

  }
}

#agenda-tasks-filter-title {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 0 8px rgba(0, 0, 0, .035);
  margin-bottom: 40px;
  position: relative;

  .close {
    position: absolute;
    top: 9px;
    right: 10px;
  }
}

#agenda {
  margin-top: 40px;
  .clearfix;

  .hide-overflow {
    height: 20%;
    height: 400px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
    position: Absolute;
    bottom: 0;
    left: 0;
    display: none;
  }

  h4 {
    //text-transform:uppercase;


    margin: 0;
    color:@dark-blue;
    margin-bottom:20px;

    display: inline-block;
  }

  ul.list {
    background:#fff;
    padding:5px 20px;
    border-radius:3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    margin-bottom:60px;
  }

  .task-list {
    .project-name {
      font-size: 90%;
      padding: 0 10px;
    }
  }

  .no-tasks {
    text-align: center;
    font-style: italic;
    padding: 0;

    &:hover {
      background: none;
      cursor: default;
    }
  }

  .has-tasks {
    .no-tasks {
      display: none;
    }
  }

  .drop-hover {
    background: rgba(238, 240, 245, .2);
    background: rgba(193, 237, 245, 0.2);
    outline: dashed 1px rgba(238, 240, 245, 1);
  }

  .sort-handle, .is-task-completed {
    display: none;
  }

  .status-indicators {
    left: -10px;
  }
  .task-details {
    color: #222;
    padding-left: 10px;
  }

  .task-due-date {
    margin-right: 0;
    font-weight: normal;
    color: #AFBDC6;
    right:20px;
    width:105px;
  }

  .task-assigned {
    display:none;
  }

  .task-status {
    width: 90px;
    right: 130px;
    position: absolute;
    top: 0;

    span {
      //border:1px solid rgba(0, 0, 0, .15);
      border-radius: 3px;
      display: block;
      height: 22px;
      line-height: 22px;
      position: relative;
      top: 13px;
      padding: 0 10px;
      text-align: center;
      font-size: 12px;
    }

  }

  .overdue .task-status span {
    background: #FC6E63;
    color: #fff;
  }

  .at-risk .task-status span {
    background: #FEC485;
    color: #fff;
  }

  .on-schedule .task-status {
    display: none;
  }

  .task-list li {
    padding-left: 20px;
    padding-right:240px;
    box-shadow:none;


    &:hover {
      .task-due-date {
        display: block;
      }
    }

    &:before {
      content: '-';
      position: absolute;
      left: 10px;
      top: 0;
      color: #aaa;
    }
  }

  .dashboard-calendar {
    width: 350px;
    margin-bottom:40px;

    .fc-day-number {
      font-size: 14px;
    }

    .fc-scroller {
      overflow: hidden;
    }
  }

  .marker {
    display: none !important;
  }
}

.open-projects {
  max-width: 350px;
  h4 {
    margin-bottom: 10px !important;
    margin-top: 20px !important;
  }
  li {
    list-style: none;
    padding: 10px;
    cursor: pointer;
    transition: background-color .2s ease;
    position: relative;

    &:hover {
      background: #fffbea;
    }
  }
  .project-name {
    color: #111;
    padding-left: 18px;
    position: relative;
    padding-right: 100px;
    .ellipsis;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 4px;
      left: 0;
      height: 12px;
      width: 12px;

      border: 2px solid #6DCADB;
      border-radius: 50%;
    }
  }

  .overdue .project-name:before, .behind-schedule .project-name:before {
    border: 2px solid #FC6E63;
  }

  .at-risk .project-name:before {
    border: 2px solid #FEC485;
  }

  .project-due-date {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .project-client {
    color: #888;
    .ellipsis;
  }
}

.solo-panel{
  background: #fff;
  border-radius:4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

#agenda-activity {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  .solo-panel;

  .activity-content {
    padding-right: 100px;

  }

  .activity-timestamp {
    position: absolute;
    right: 0;
    top: 0;
  }
}



.agenda-tab {
  display: none;

  &.showing {
    display: block;
  }
}

#summary-widgets {
  font-size: 0;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 40px;
  text-align: center;
}

.summary-widget {

  /* background: #fff; */
  display: inline-block;
  margin: 0 5px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  /* border-bottom: 1px solid #EDEDED; */

  h5 {
    color: #989898;

    display: inline-block;
    margin: 0;
  }

  &:last-child h5:after {
    display: none;
  }

  &.active {
    h5 {
      color: #fff;
    }

    border-radius: 20px;
    color: #fff;
    background: #27AAFD;
  }
}

#agenda-sidebar {
  width: 480px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 0 0 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  //background: #FCFCFE;
}

#agenda-main-content {
  width: 100%;
  height: 100%;
  padding: 0 480px 20px 0;
  float: left;

  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2;
}

.agenda-drag-helper {
  padding: 0 297px 0 46px;
  height: 50px;
  line-height: 50px;
  background: rgba(193, 237, 245, 0.2);
  background: rgba(238, 240, 245, .35);
  outline: dashed 1px rgba(238, 240, 245, 1);

  .task-due-date, .task-assigned, .task-meta, .task-status {
    display: none;
  }

}

#agenda-billing {
  max-width: 800px;
  margin: 0 auto;

  .activity-stream {
    border-top: 1px solid rgba(0, 0, 0, .1);
    margin-top: 20px;
    padding-top: 15px;

    .type-icon {
      height: 32px;
      width: 32px;
      //background: #444;
      border-radius: 4px;
      text-align: center;
      line-height: 32px;
      display: inline-block;

      span {
        top: 2px;
        color: #fff;
        font-size: 17px;
        position: relative;
      }
    }

    .user-image {
      display: none;
    }
  }

  h5 {
    padding: 12px 0;
    margin: 0;
  }

  img {
    color: #F87C79;
    margin-right: 10px;
  }

  .activity-show-all {
    display: none;
  }
}

@media (max-width: 1649px) {
  #dashboard-right-column, #agenda-sidebar {
    width: 350px;
    padding-left: 20px;
  }

  #dashboard-left-column, #agenda-main-content {
    padding-right: 380px;
  }

  #agenda .dashboard-calendar{
    width:320px;
  }


}

@media (max-width: 1400px) {
  .dashboard-widget {
    width: 50%;
    padding: 40px 20px;

    &:last-child {
      display: none;
    }
    h5 {
      font-size: 12px;
    }
  }

  .dashboard-calendar {
    display: none;
  }

  #agenda {
    .task-status {
      height: 22px;

      span {
        display: none;
      }
    }

    .task-list li {
      padding-right: 230px;
    }
  }

  #dashboard-upcoming-events-list {
    margin-left: 0;
  }

  .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

}

@media (max-width: 1024px) {
  #dashboard-widgets {
    margin-left: 20px;
  }


  #agenda-sidebar {
    display: none;
  }

  #dashboard-left-column, #agenda-main-content {
    padding-right: 0;
  }
}

@media (max-width: 800px) {

}

@media (max-width: 500px) {

}

#bottom-navigation{
  position:fixed;
  bottom:0;
  left:0;
  height:50px;
  background:#fff;
  width:100%;
  display:none;


  ul{
    //flexbox;
    display:flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  li{
    display:block;
    padding:0 20px;
    text-align:center;
    cursor:pointer;

    &:hover, &.active{
      .icon, .text{
        color:@other-bright-blue;
      }
    }
  }

  a{
    color:@darker-text-color;

    &:hover{
      text-decoration:none;
    }
  }

  .icon{
    font-size:20px;
    display:inline-block;
  }

  .text{
    font-size:10px;
    display:block;

  }

  @media (max-width:1024px){
    display:block;
  }
}